CSS display: run-in;

display:run-in; 是一个非常有趣的属性,虽然作为普通流里的一个环节,但却很少有人问津。Chris Coyier 曾经写过一篇 CSS Run-in Display Value,简述了这个属性的作用。除此以外,它几乎不被人所讨论。

对于其定义,大致上就是下面这三点:

  1. If the run-in box contains a block box, the run-in box becomes a block box.
  1. If a sibling block box (that does not float and is not absolutely positioned) follows the run-in box, the run-in box becomes the first inline box of the block box. A run-in cannot run in to a block that already starts with a run-in or that itself is a run-in.
  2. Otherwise, the run-in box becomes a block box.

翻译成中文就是下面的意思:

  1. 如果 run-in box 包含 block box,那么这个 run-in box 也成为 block box
  2. 如果紧跟在 run-in box 之后的兄弟节点是 block box,那么这个 run-in box 就会做为此 block box 里的 inline boxrun-in box 不能进入已经一个已经以 run-in box 开头的块内,也不能进入本身就是 display:run-in; 的块内
  3. 否则,run-in box 成为 block box

可见 display:run-in; 会根据上下文环境变换表现形式:如果后面是一个块,那么就并入其中成为行内头。如果后面是行,则继续独立保持成块。

对于这个属性,也许我们不禁要问,它有什么用?比如,我们完全可以用 floatinline-block 甚至是 inline 替代从而达到类似的视觉效果。然而,典型应用里,h1 - h6无法包含在 p 里,我们既要达到语义又要达到这样的视觉效果的话,唯有使用 display:run-in;float 毕竟无法让标题inline在整个段落的开头,文字的大小会影响换行和布局。而 inline-block 以及 inline 则不符合语义。

再来看看主流浏览器的表现(结果可能和平时我们队浏览器的概念不太相同):

  • Opera可能是最早完整支持这个属性的浏览器,至少在简单的测试组合里,其都能完整的符合定义的描述。
  • 自IE8开始,display:run-in; 在IE里也能像Opera一样完整支持。
  • Firefox的表现非常令人失望,直到现在(Firefox9)都对这个属性置若罔闻。
  • Webkit(Chrome和Safari)的表现非常有趣,其能部分支持 display:run-in;,正确将块作为行内元素塞入跟随的块中,不过在很多方面表现的并不正确。比如,如果跟随块里包含其它块,那么它会无法正确包含 run-in块。当连续重复出现多个run-in的时候,webkit会不管三七二十一都将其并入跟在后面的块里。更为有趣的是,每次刷新都只能先并入2个,但每次重绘(比如调整窗口大小)都会再多并入一个...太诡异了。

我写了简单的DEMO:http://www.swordair.com/demos/demo-display-run-in/ ,用不同的浏览器打开可以看到不同的结果。特别的,如果现在用webkit你也许还能看到它诡异的表现:)

客观的来说,这个属性的使用面确实非常狭窄,何况当前的浏览器支持还如此不济的情况下,无人问津是在自然不过的事了。可以想见,即便它能被浏览器很好的支持,也仅能使用在非常特定的场合。

而我之所以写它的目的是为之后的另一篇文章做铺垫。发了这么多文章以后我似乎总是难以避免自己的长篇大论,于是自己必须有意识地把它们拆解开来,以此控制每篇文章的长度。