&nbs p;
一、先来回顾下
时间过得真的是相当得快，总觉得是不久之前写的内容，一翻阅，“呵呵”，已经2年多了。
2年前的5月份，著有“IE不支持 CSS 3多背景的替代解决”一文，讲的是如何使用单独一个标签定位2张背景图片，实现 宽 度自适应按钮效果，兼容IE6+以及其他浏览器。
原理是 background + filter 滤镜，类似下面代码：
# multi-bg { background: url(images/bg -i mage-1.gif) no-re PE at; filter: PR ogid:DXImageTransform.Microsoft.Alph ai mageLoader (src='images/bg-image-2.gif', sizingMethod='crop'); /* IE6-8 */ } 与 First -line的因缘
多次有人问过我如何使用CSS实现多行文字溢出的点点点显示，最近就做了很多尝试，于是，有幸接触到了 first-line 伪类 。一看浏览器的兼容性，哟，不错，IE5.5+就 开始 支持了。
first-line 可以让block水平元素的第一行文本应用一些文字相关的样式以及背景等。于是，自己突然有了想法：伪元素可以设置背景，元素本身可以设置背景，那岂不是就是多背景效果的实现？岂不是可以实现按钮宽度自适应效果？
很多神奇、很多无奈、很多巧合，还真的可以实现，IE6+兼容，本文就将介绍相关内容。
相关tip很多，大家要多多留神，不要有所遗漏。
二、first-line伪类基础知识
就目前而言，first-line伪类的说法其实 应该 更正成伪元素，也就是从 :first-line 到 :: first-line 的变化。 不过 ，本文中，如果是IE6/IE7中的 first-line , 还是使用“伪类”的称呼，其他浏览器“伪元素”。
顾名思意， first-line 表示第一行，其与 first- let ter 实则表兄弟关系，都是 针对文字 的。注意这里，“针对文字”，也就是说， first-line 是无法匹配任何真实的 HTML 元素的！
对于inline水平的元素，其本身就是line box, 就是一行流，因此，不存在所谓的 first-line 的说法。因此， first-line 伪类/伪元素要想起作用，必须应用在block水平的元素上，例如 dis play 为如下值的些元素 block , inline-block , table-cell 或 table-caption .
再由于 first-line 伪类/伪元素是处理文字字符的，因此，只有部分的CSS声明可以使用，类似 float ， pos IT ion:absolute 这些破坏性属性显然是不支持的。那都支持那些属性呢？
所有文字相关属性： font , font -s tyle , font- VAR iant , font-weight , font-size , 以及 font-f ami ly . color 属性。 所有背景相关属性： background-color , background-image , background-position , background-repeat , background-size , 以及 background-attachment . word-spacing , letter-spacing , text-decoration , text -t ransform , 和 line-h ei ght . 基本示例、常规使用
如下 < blockquote > 标签引用一段文字，我们现在希望首行 文字颜色 黑黑的 （若无效果，访问原出处） ，其他文字（除链接）灰灰的：
blockquote:first-line { color: black; } @H_ 406 _138@腾讯将在7月3日召开“2013年腾讯合作伙伴大会”，到时腾讯会公布移动开放策略，包括微信的开放规则和 QQ 的移动开放战略，想要实现手机QQ和 qq空间 的应用中心一体化。首先是引入表情应用中心，除手机QQ外，微信也将在随后的版本中引入表情中心。新版手机QQ将先于微信推出移动支付！手机QQ迎来重大更新哦。
@知托付-颂赞 如今的企鹅军团不再是那只仅会 抄袭 的企鹅了！通过这次的QQ合作伙伴大会，我 觉得 马化腾 可能会秒杀许多 互联网 公司 的业务，这些被秒杀的公司不乏会有 百度 、阿里、 新浪 、网易等。
潜力
NBA火箭队的传奇教练——鲁迪·汤姆贾诺维奇说过这么一句广为流传的话：“ 永远 不要低估一个总冠军的心”。每个 CSS属性 来到这个世界上都是希望成为web的基石，即使可能看上去，他是个 菜鸟 ，他没有 价值 ，全宇宙废柴先进代表，你也不能忽略其在web上那颗高屋建瓴的心。
从实际角度讲，尤其对于中文网站而言， :first-line 伪类/伪元素似乎在废柴之路走得更加深远，布局自然废到掉渣，连文本显示也掉价了（例如没有所谓大小写控制）。因此，在自己这些年的CSS接触中， :first-line 就像 半 岛铁盒一样，被遗弃在阁楼的角落，尘封已久，多年未见。
但是，显然，很多CSS属性被我们习惯性低估了， :first-line 就是其中之一。近日的一些潜力挖掘让我发现，本应为文字UI控制而生的 :first-line 伪类/伪元素可以用来布局；就好像，竹子不仅可以用来做钓鱼竿，还可以当钢筋使，建房建楼！
三、成也bug, 败也bug
兼容性
概况表( From mozilla)：
| 基本支持 | 1.0 | 1.0 (1.7或更早) | 9.0 | 7.0 | 1.0 (85) |
| 老的单冒号形式( :first-line ) | 1.0 | 1.0 (1.7或更早) | 5.5 | 3.5 | 1.0 (85) |
详细表(from sitePoint)：
| Buggy | Buggy | Buggy | Full | Partial | Partial | Partial | Partial | Partial | Full | Full | Full | Full | Partial | Partial | Partial | Full |
从上表可以看出，IE6/IE7 bug丛生。哟，到底是骡子bug呢还是马bug，出来溜溜：
空白文字节点bug
当 block 水平元素的第一个子元素也是 block 水平的时候，如果这个子元素前面有空格或换行，类似：
则在IE6/IE7浏览器下，这个空白节点会被 first-line 抓住。由于节点空白，因此，只有 background 属性又作用，一般情况下，背景高度=父容器 paddingTop 值+第一子元素 marginTop 值+第一子元素 lineHeight 高度，很神奇！
例如下面的代码：
.bg { border: 1px solid #aaa; } .bg:first-line { background: #eee; color: red; }
<div class="bg"> <p>第一行？</p> <p>第2行？</p> </div>
结果，IE7浏览器下这幅模样——有背景色文字无红色——实则空白文字节点渲染而非第一子元素：
line box → block化bug
见如下CSS以及HTML代码：
.bg { border: 1px solid #aaa; padding: 5px; } .bg:first-line { background: #eee; color: red; }
<div class="bg"> 第一行？ </div>
按照我们正常的理解， first-line 好的是文字这口，因此，背景色应该是文字的 content area 区域，应该类似下面的效果：
但是，在IE6/IE7下却是这个样子的：
我勒个去，整个区域背景填充啊，真是个让人非常喜爱的bug啊，注意到本栏那个色色的表情没！我们如果把这里的背景色换成背景图片，是不是就可以实现多背景效果啦！！
#multi-bg { background: url(images/bg-image-1.gif); } #multi-bg:first-line { background: url(images/bg-image-2.gif); } haslayout bug 如果说上一个bug是小阿斗变战神，那么这个bug就是原来阿斗在做梦！55555~~
如果元素有 haslayout , 那么IE6/IE7下 :first-line 的背景就进入月读，完全没作用了（颜色啊字符间距什么的都还是有作用的）！
这是相当坑的，要想有背景，就不能有 haslayout , 则意味着，元素不能定高定宽，不能 float ，应用 inline-block 以及绝对定位，也就意味着元素自身是不可能自适应内部文字的。
IE6选择器空格不识别bug
在IE6浏览器下，如果这样子写： :first-line{} 是无效的；要这样子写： :first-line {} ；花括号 { 前面要有一个空格。 IE8 !important不识别bug
IE8浏览器中， :first-letter 或 :first-line 伪元素中 !important 声明会被鄙视。 其他些bug
比方说IE8下第一个子元素为block水平但被 :first-line 伪元素选择的bug等~~
我们IE6/IE7下多背景的实现是借助上面神奇的第2个bug, 但是，由于 haslayout 的bug, 在多背景实现的完美度上打了个大大折扣啊。当然，效果实现自然没问题，先睹为快！
四、还是自适应按钮实现的例子
任意浏览器，您可以狠狠地点击这里：first-line伪类下兼容的宽度自适应按钮demo
例如，在本该忽略的IE6浏览器下：
相关核心CSS代码如下：
.button { display: block; padding: 9px 1em 11px; font-size: 14px; line-height: 16px; background:url(/study/image/gray_baidu_btn.png) no-repeat right -36px; text-align: center; color: #333; } .button:first-line { background: url(/study/image/gray_baidu_btn.png) no-repeat; } demo中按钮的自适应实现并不是通过自身的自适应实现（haslayout bug的限制），而是外部的自适应限制实现的。第一个按钮为宽度自适应限制的例子。在容器定宽的选项卡或垂直菜单导航上，此方法很有一试的价值。
本demo中，IE8+以及其他现代浏览器的实现是借助 :before 伪元素进行定位的。不是重点不多说。
其他需要说明的：
:first-line 伪元素的背景图片覆盖元素自身的背景图片； 由于不能 haslayout , 因此，IE6/IE7下，元素不能应用 position:relative , 应该知道的，会有背景图片上边缘几像素不显示的问题； 虽然方法有局限，但是，从面向未来的角度讲，尽可能少的标签实现按钮，在数年之后的大改中，会幸福地泪流满面！（为何？♪ 就不告诉你..就不告诉你..就不~告诉你….. ♪）因此，本方法虽然有局限，但是，遇到适合使用的情景的时候，请义不容辞使用之。 有人可能会问，那配合开始提到的 AlphaImageLoader 滤镜岂不是可以实现IE6/IE7下三背景图片效果，哈哈！想法不错，然而，其中有个不可抗拒的悖论：IE6/IE7下滤镜要有效果，需要 haslayout ；而IE6/IE7下 :first-line 要有效果，不能 haslayout . 大人和孩子只能保一个，鱼和熊掌只能吃一个，你自己选吧~然后……好像完了。
五、突然的结语
我印象中，我应该有好多内容要写的，怎么就戛然而止了呢？
啊，花费今年“维-稳”费用的亿分之一个脑细胞之后，我还真想起了点忘记说的内容。
IE6, IE7下 button 元素是没办法应用多背景的，因为 button 元素自身 haslayout ，此 layout 汤姆哥都抹杀不掉！
就这样吧。文中若有错误欢迎指正，最后萌妹子镇底：
（本篇完）
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-first-line伪类实现兼容IE6/IE7的单标签多背景效果 全部内容，希望文章能够帮你解决 html5教程-first-line伪类实现兼容IE6/IE7的单标签多背景效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-first-line伪类实现兼容IE6/IE7的单标签多背景效果的详细内容...