Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

first-line对block级元素的影响

  CSS中有first-line伪类可以使用,并且兼容到IE8。按照CSS2.1的描述,它是作用于元素渲染了的第一行。那就意味着无论第一行里面是inline级元素还是block级元素,都应该生效。但目前浏览器的实现却不是这样。我觉得IE的行为才是最正确的。
  下面是测试代码,首先是测试inline-block的情况 <!DOCTYPE html>
<style>
div {
  font:12px/1.25 Simsun;
  border:1px solid #CCC;
  width:110px;
  padding:0px;
  word-break:break-all;
}
div:first-line {color:red;}
span {
  border:1px solid #CCC;
  bacnground:#F5F5F5;
  margin:5px;
  display:inline-block;
}
</style>
<div>
  <span>item1</span>
  item2
  <span>item3</span>
  <span>item4</span>
  <span>item5</span>
  <span>item6</span>
</div>

  Chrome上对这种情况不做处理,我不知道是出于何种原因,但我觉得此处的第一个SPAN元素也应该属于第一行的。
  接着再测试block的情况,只是把上面代码中span元素样式的display属性改变为block而已,我就不重复贴代码了。

  这时候轮到Firefox与众不同了。其实感觉上block级元素的内容作为其容器的首行是有点奇怪,但仔细想想也很合理。而且根据CSS2.1文档的描述,它确实希望对block级元素也应用上first-line设置的样式。
  搞了半天只有IE的行为是最正确的,这是个具有讽刺意义的实时。其实CSS2.1的文档很混乱,很多地方含糊其辞。有些时候光读它是无法理解的,可能还要结合上自己的逻辑才能判断其正确性。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^