CSS 对于 display 属性有一个名为run-in的值。 就像这样
h3 {
display: run-in;
}目的是允许标题运行到其下方的文本中，而不会牺牲语义或遇到使用其他布局技术强制执行时可能遇到的问题。
让我们仔细看看。
但是为什么不 __________？
但是为什么不将其浮动到左侧？ 嗯，标题的字体大小通常大于正文类型。 因此，如果您将标题浮动到左侧，则可能会捕获多于一行。
但是为什么不将其设为内联元素？ 因为后面的文本可能（实际上，很可能）位于段落标签内。 段落标签是块级标签，因此如果它们跟随内联元素，则会换行，并且效果将无法实现。 您可以将<h3>标签插入到<p>标签中，但这会带来语义问题，更重要的是，会带来长期维护问题。 如果这种效果过时了怎么办？
但是为什么不使用内联块？ 与上面相同的问题。 除非您将标题塞入下面的段落中，否则效果将无法实现，这存在问题。
那它是怎么工作的呢？
如果一个 run-in 元素在块级元素之前，则 run-in 元素在结构上表现得好像它已成为块级元素的第一个内联子元素。
浏览器支持
没怎么听说过这个？ 嗯，这可能是因为浏览器支持有点奇怪。
有传言说 Mozilla 对规范 不满意。 Firefox 完全不支持它，包括版本 4 测试版。
WebKit 系列（Safari 和 Chrome）以及 Opera 和 IE 8 都支持它。 不过，这些浏览器处理方式存在一些差异。 据报道，较旧版本的 WebKit 和 Konqueror 允许 run-in 元素运行到后续的内联元素中，这是不正确的。
规范中的问题？
在我自己阅读规范的过程中，我发现它有点不清楚。
如果一个兄弟块框（不浮动且未绝对定位）跟随 run-in 框，则 run-in 框在结构上变为块框的第一个内联框。
这很有道理，并且似乎就是这样工作的，但是“成为第一个内联框”是否意味着 run-in 框应该成为块框的后代？ 在 WebKit 中，run-in 元素保持其独立性。
run-in 不能运行到已经以 run-in 开头或本身是 run-in 的块中。
这是否意味着不能有两个标题，都是 run-in，运行到下面的段落中？ 这就是我阅读的方式，但我认为 WebKit 的实现，其中它们都位于内部，更有意义。 Opera 和 IE 8 遵循规范，即第一个 run-in 变成块，第二个变成内联。
然后它说
否则，run-in 框变为块框。
否则是一个很大的词，但实现在这里一直都很好。 在父级中连续三个 run-in？ 它们都变成块。 夹在两个内联元素之间的 run-in？ 它变成块。 run-in > 绝对定位 > 块，run-in 变为块。 我知道这让人难以理解，但当前的现代浏览器在这里做得很好。
如果 run-in 元素包含任何块级内容，则它将变为块级。 所有浏览器似乎都同意这一点。
很遗憾 Firexox 不支持它……
很棒的提示！ 谢谢 Chris。
不知道。 谢谢你的提示。
很棒的提示，但可惜 Fire fox 不喜欢它。
如果 Firefox 支持该属性，那将非常棒。 遗憾！
奇怪的是，firefox 不支持它，但 IE8 支持。
我想如果他们不同意规范，就不会这样。 但您至少会期望他们稍微努力一下集成，就像其他供应商尝试的那样。
这当然是一个有趣的概念，如果规范达成一致并将其实施到最新版本中，它可能会被证明非常有用。
这很酷。 我相信有人会为 FF 想出一个解决方法……
关于一个至少在所有浏览器的最新版本中都没有广泛支持的 css 属性的文章有什么意义？
是否有人真的使用不稳定的支持 css 属性来实现商业标准网站？
我的意见，并非旨在引发任何争议
在我看来，这得到了相当广泛的支持。 Firefox 仍然不支持这一事实使它更加有趣，也更值得写一篇文章。
呃，什么？ 所以你的意思是……任何 CSS3 文章有什么意义，因为{插入浏览器}不支持它？ 五分之四已经足够了。
人们使用专有 css（和其他）标记来实现网站，这些标记仅在一个浏览器中有效
…当然，我没有指名道姓：）
“总有一天会有浸过柠檬的纸质餐巾”——银河系漫游指南
我宁愿现在学习这些东西，而不是等到它得到广泛实施到可以使用的程度时再追赶。
由于缺乏支持/已签署的标准，我只会使用少量 HTML5 和 CSS3，但像这样的文章可以更好地为我们做好准备，并在时机成熟时为我们提供参考的地方。
干得好，Chris。
在 FF 决定支持它之前，我无法让自己使用它，但它是很棒的文章素材（为什么抱怨？）。 我已经将其添加书签，以期 FF 决定支持它。 我希望他们这样做，这是一个非常棒的属性，我发现它非常有用。
从渐进增强方面考虑一下。 您可以使用此属性，并且在 FF 支持的那一天，它看起来就像在其他浏览器中一样。 在此之前，它看起来有所不同，但不会对内容造成任何损害。
这正是我目前正在进行的一个项目中一直在寻找的东西，但可能不会使用它，因为 Firefox 不支持它。
发现你想要的东西，却意识到你无法真正使用它，这真是令人心碎。
您可以通过将标题和后面的段落都设置为 `display: inline` 来实现此效果。它可能（取决于您的用法）需要在标签中添加一个额外的类，但它在我的所有测试浏览器中都能正常工作。
很酷的技巧。我博客读者中有 53% 使用 Firefox，13% 使用 Chrome，只有 6% 使用 Safari。我不会使用主要浏览器不支持的东西。
即使在我的工作环境中，Firefox 的使用率也比较典型（可能在 40% 左右），这高到无法忽视。即使有人想出一个让它工作的方法，就像上面那个人说的那样，那也是为了在一个浏览器中让它工作而需要处理的更多麻烦。
不过，我很感谢看到一些我甚至不知道存在的东西。我同意 Firefox 不支持它。如果你无法弄清楚，它确实太模糊了，不值得费心。
我完全可以想象一些设计实例，其中标题使用了 `run-in`，但设计是这样的，在 Firefox 中它只是变成了块级元素，而设计并没有因此变得更糟。
不过，总的来说，你并不属于多数。在许多领域，Chrome 和 IE 目前是势均力敌的，这完全取决于你的位置、目标人群、当地经济状况以及其他许多因素。
我网站的用户中，大概有 40% 使用 Chrome，IE 的用户也差不多。但对于特定网站来说，这确实会变得非常奇怪，很多用户使用的是较低版本的 IE。这都取决于具体情况。
了解这些事情肯定是有价值的，尤其是在考虑到你可以为不支持的浏览器优雅降级的情况下。
Chris，我多么喜欢你的文章，但请你帮我们这些 CSS 极客一个忙好吗？
不要让我对这个潜在的强大 CSS 属性及其承诺流口水，阅读一篇关于它的长篇文章，然后在最后告诉我它支持得很差？这会导致我的大脑感到失望。
如果你正在写一篇关于 CSS 属性的文章，你能在更早的时候提到浏览器支持情况，或者更好的是在页面顶部显示支持它的浏览器的 logo 吗？
从好的方面来说，我喜欢这篇文章的信息量，并且，就像完整的 CSS3 支持一样，我迫不及待地希望它成为一个普遍的现实。我现在 28 岁了，所以在我第三次中年危机之前，所有浏览器都将支持所有 CSS3 属性——有人想早点卖给我他们的跑车吗？
这篇文章并不长，而且有一整节关于浏览器支持的内容。不幸的是，它并不像支持与不支持那样简单。
另外需要明确的是，它不是专门针对 CSS3 的。浏览器已经玩弄它超过 10 年了。
我们设计师/开发者（包括我自己）的双重标准有多可笑？
我们使用 IE 无法处理的酷炫技巧、属性和 CSS3，并准备大喊“我正在使用它，如果 IE 用户看不到它，那就算了，他们也该开始使用一个像样的浏览器了”。但现在我们发现了一个（1）Firefox 不支持但所有其他浏览器都支持（某种程度上）的属性，我们却说“我不会使用它！Firefox 用户将无法看到它！”
:)
最近，Battle.net 的 Real ID 页面 (http://us.battle.net/en/realid/) 实现了这个功能，并且在页面设计的上下文中看起来非常漂亮（看起来它已经被移除了）。
它可能不会在所有设计上下文中都适用，但绝对是设计师武器库中的另一种工具，尤其是在它在 Firefox 中优雅地降级为普通的块级元素的情况下。
Chris，感谢你对这种显示模式的解释和历史，以及演示，以便我们都能看到它的实际效果。
我第一次在 Opera 配置中看到它（用于小分辨率），但从未在我的工作中需要使用它。
发现得不错，并且对规范进行了出色的研究。你绝对应该继续写关于这种发现的文章。
不过，我也注意到这种模式，不仅在你的网站上，而且在很多关于 CSS 的网站上都有。它从一个令人兴奋的功能开始，然后以“啊，算了吧……不能用它”结束。
我知道，如果心态正确，你可以让这样的东西在各种浏览器中都能工作，但越来越多地，我发现有时需要付出的努力、黑客手段和额外的库是浪费时间，我最终只是不使用它，除了例外情况（比如圆角和阴影，它们可以非常优雅地降级）。
我想可以在段落元素内部使用一个 `span` 元素，并使用与你希望模仿的标题相同的样式。
Firefox/Gecko 引擎浏览器似乎不支持此属性，但支持此功能的浏览器/Webkit 引擎会正确显示这些属性。我相信这有助于消除浮动属性/设计布局，直到所有浏览器技术赶上来。不幸的是，CSS 正在淘汰浏览器引擎，而不是反过来，否则世界将会变得更好。
这是我第一次遇到这个属性。非常感谢你分享它。
以前从未听说过 `run-in` 属性。尽管存在一些 Firefox 问题，但我肯定可以找到一些用途！
感谢你的信息，Chris！
就在我以为我已经了解了关于 CSS 2.1 的所有知识时，我读到了这个非常棒的属性。像所有属性一样，它不会在每个项目中都使用，但总有一天，它会比使用 `span` 的类更适合使用。
至于 Firefox 不支持它，我相信这将是那些 99% 的时间它会对 15% 的网站访客优雅降级的情况之一。我仍然看到 IE6 用户，而且我不再使用任何类型的 PNG 修复来处理带有透明度的 PNG 了。
在我看来（通常是错误的），任何从未做过不被 100% 的浏览器支持的事情的人可能从未走出过俗套的盒子。
我的意思是
我想我们可以用字体替换 h3
是否有任何跨浏览器的 jQuery 替代方案？
由于大多数浏览器都不支持 `display: run-in`，因此为了设置 `run-in` 标题的样式，我使用 `display: inline` 来设置标题和下一个同级段落的样式，并使用邻近选择器 `+`，它得到了很好的支持。例如，
`#content h3, #content h3 + p{ display: inline; }`
或者
`#content h3{ display: inline-block;}`
`#content h3 + p{ display: inline;}`
这似乎也起作用（至少在 Firefox 和 Safari 中），并且允许你为 h3 应用边距。
我在浏览 quirksmode.org 的兼容性表格 时了解了 `+`。非常有用。
糟糕，这是 quirksmode.org 的兼容性表格 的正确链接。复制粘贴错误。对此表示歉意。
请注意，此技术的实用性受到以下要求的限制：h3 之前必须有一个元素显示为块（例如，每个标题至少有 2 个段落，因为第一个段落显示为内联）。否则，标题不仅会与后面的段落连在一起，还会与前面的段落连在一起。
以及我之前关于 `inline-block` 的说法，它不适用于多行标题。
`Display: run-in` 在 Chrome 中不再受支持。