显示：磨合在Chrome中掉线了吗？

Question

I have tried to use display: run-in in order to create a semantic and nice-looking metadata name-value list, liks this: 我试图使用display: run-in来创建一个语义美观的元数据名称-值列表，如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Run-in description list test</title>
<style>
dt {
  font-weight: bold;
  display: run-in;
}
dt:after {
  content: ": "
}
</style>
</head>

<body>

  <dl>
    <dt>Subject</dt>
    <dd>A Question</dd>
    <dt>From</dt>
    <dd>Mr Smith</dd>
    <dt>Time</dt>
    <dd>2013-08-05</dd>
  </dl>


</body>
</html>

The expected result is 预期的结果是

Subject: A Question 主题：一个问题
From: Mr Smith 来自：史密斯先生
Time: 2013-08-05 时间： 2013-08-05

You can watch it live . 您可以现场观看。 (Actually, the idea to use display: run-in was given to me by Ian Hickson, after I started nagging about the di element from XHTML 2.0. One alternative is to use float , but that comes with a number of difficulties.) （实际上，使用display: run-in的想法是Ian Hickson在我开始讨论XHTML 2.0中的di元素后给我的。一种替代方法是使用float ，但这会带来很多困难。）

Until recently, this worked wonderfully in every modern browser except Firefox (that is, it worked perfectly in Internet Explorer, Google Chrome, Opera, and Safari (I think)). 直到最近，该功能在除Firefox之外的所有现代浏览器中都发挥了出色的作用（也就是说，它在Internet Explorer，Google Chrome，Opera和Safari（我认为）中均可以完美运行）。 But very recently I discovered that it doesn't work in Google Chrome anymore. 但是最近，我发现它不再适用于Google Chrome。

Question: Has Google Chrome dropped support for display: run-in ? 问题： Google Chrome浏览器是否已放弃对display: run-in支持？ Is there an alternative that works the same way? 有没有其他替代方法能以相同的方式工作？

Answer 1

I'm not aware of any change to Chrome's support of display:run-in but the setting has always seemed unloved. 我不知道Chrome对display:run-in的支持是否有任何变化display:run-in但该设置似乎始终不受欢迎。

Hixie has been consistently opposed to <di> and I kind of understand why. Hixie一直反对<di> ，我有点理解为什么。 HTML is a semantic language and the semantics are fully defined by dl/dt/dd . HTML是一种语义语言，并且语义完全由dl/dt/dd定义。 The only practical problems are presentational, and that makes it a CSS problem, not an HTML one. 唯一实际的问题是表示性问题，这使其成为CSS问题，而不是HTML问题。

Unfortunately, then current state of CSS doesn't seem up to the job. 不幸的是，当时的CSS状态似乎无法胜任。 For dl/dt/dd, and for many similar problems, we really need a mechanism for wrapping groups of elements in a pseudo element which could then perform the role of the <di> . 对于dl / dt / dd以及许多类似的问题，我们确实需要一种将元素组包装在伪元素中的机制，该机制然后可以执行<di>的作用。

Obviously, there is no current setting that does what display:run-in is supposed to do. 显然，当前没有任何设置可以执行display:run-in应该做的事情。 Having said that, in your specific test case, you could achieve the same effect with this CSS: 话虽如此，在您的特定测试用例中，您可以使用此CSS达到相同的效果：

dt {
  font-weight: bold;
  display: inline;
}
dt:after {
  content: ": ";
}
dd {
  display: inline;
  margin:0;
}
dd:after {
  content:'\0A';
  white-space:pre;
}

Answer 2

I'd like to offer a different, more explicit approach to the solution. 我想提供一种不同的，更明确的解决方案。 One that can be extended to a more general case of missing display:run-in behavior. 可以扩展到缺少display:run-in的更一般情况display:run-in行为。 Ie I'm using h4 -> p flow-in transition to compose a nicely formatted list of item properties: 即我正在使用h4 > p流入过渡来组成格式良好的项目属性列表：

h4 {
    font-weight: bold;
    display: inline;
}
h4::after {
    content: ": ";
}
h4 + p {
    display: inline;
}
h4 + p::after {
    content: '\0A';
    display: block;
}

Here, I'm using "immediate sibling" ( + ) CSS selector to select p elements immediately preceded by h4 elements. 在这里，我使用“立即同级”（ + ）CSS选择器来选择紧接h4元素的p元素。 If h4 is followed by any other element, it will be displayed following the normal flow. 如果h4后面紧跟任何其他元素，它将在正常流程之后显示。

An alternate selector ~ will select not one but all elements of the said type, which is not what usually expected from run-in behavior, and will also extend to all tags of the same type in current scope regardless of the other intermixed tags, which could break the layout completely. 替代选择器~不会选择一种，而是选择上述类型的所有元素，这通常不是运行时所期望的，并且还将扩展到当前范围内所有相同类型的标签，而与其他混合标签无关，可能会完全破坏布局。

显示：磨合在Chrome中掉线了吗？

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-02-28 00:50:56

解决方案2
0 2017-09-19 11:31:00

显示：磨合在Chrome中掉线了吗？

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-02-28 00:50:56

解决方案2 0 2017-09-19 11:31:00

解决方案1
2 已采纳 2014-02-28 00:50:56

解决方案2
0 2017-09-19 11:31:00