一个 Firefox 的 CSS bug

像 Firefox 和 Chrome 这样的浏览器,一直都紧跟 W3C 标准,几乎可以认为是完全实现了标准,但什么事也都不是绝对的,最近我就发现了一个 Firefox 的 bug,而且还是 CSS2.1 的,一直都没有修复。

这个 bug 并不复杂,重现起来很简单:

<style>
div { white-space:nowrap; }
div i { float: right; }
</style>

<div>一些不重要的文字 <i>我浮动了</i></div>

实例看下面:

一些不重要的文字我浮动了

如果在 Firefox 中查看,你就会发现浮动元素跑到了下一行,这跟其他浏览器中的行为是不一样的(当然,除了 IE6-7 这两个怪物)。具体在 Firefox 中的表现是,如果一个浮动元素的前面有行内内容(比如文字),并且父元素又设置了 white-space: nowrap 或者 white-space: pre,那么浮动元素就会另起一行,不管原先那行放不放得下。这个行为是不符合 CSS2.1 里的定义的。

这个 bug 其实很久以前就有人提出了,但 Firefox 一直没有修复,也不知是遇到了什么解决不了的问题。

参考:Bug 488725 – float pushed down one line with white-space: nowrap;

CSS 继承的一些细节

关于 CSS 的继承很多人都知道,比如 colorfont-size 都是可以继承的,W3C 规范里写有“Inherited: yes”的属性都可以从父元素继承。今天发现了一些以前不了解的东西,做个笔记。

一般来说子元素从父元素继承来的都是计算值,比如:

<div style="font-size:20px">
  <p style="font-size:2em">some <span>text</span></p>
</div>

<p> 的 font-size: 2em,计算值为 40px,所以 <span> 继承到的 font-size 也是 40px 而非 2em。如果是百分比也同样如此,也就是说相对单位先计算成绝对长度后,再继承。

line-height 有一点特殊的地方,可以接受一个不带单位的数字作属性值,这个值乘以 font-size 是最终的应用值,跟倍数一样,也有点相对单位的意思,但是继承的时候并不需要计算。所以下面例子的 <em> 也是 line-height: 2。如果你给它一个 font-size: 30px,那行高就是 60px。

<span style="font-size:20px;line-height:2;">some <em>text</em></span>

line-height 的百分比继承跟其他属性一样。

但有时候百分比也是可以继承的。text-indent 可以接受一个百分比值,用来乘以包含块宽度。子元素从父元素继承时,得到的也是百分比值。text-indent 是默认继承,其他还有一系列属性默认不继承,但如果设为 inherit,它遇到百分比也会继承百分比:

  • background-position
  • left, right, top, bottom
  • height, width
  • margin-left, margin-right, margin-top, margin-bottom
  • min-height, min-width
  • padding-left, padding-right, padding-top, padding-bottom

阅读全文 »

flight