关于hr的各版本浏览器兼容性写法

　　hr标签，相信大家都能熟悉，我们一般用它来产生横线的效果。我们可以对它定义“颜色”、“高度”、“宽度”、“边框”等样式。

　　在此只讨论“颜色”和“边框”对于不同版本浏览器的兼容性。

颜色：

　　火狐、IE7+=　　：通过background-color来指定。

　　IE6-=　　：通过color指定。

　　方案：要为hr指定颜色，同时使用background-color和color。

边框：

　　IE7+=　　：如不指定border:none，那么浏览器默认会为hr加上一定宽度的边框。

　　IE6-=　　：浏览器默认不会为其加上边框。

　　方案：显示申明border:none。

完整的兼容代码如下：

1 <style type="text/css">
2     hr{
3         border:none;
4         background-color:#060;
5         color:#060;
6         height:2px;
7         width:80%;
8     }
9 </style>
1 <body>
2     <h1>
3         Obama says Warren Buffett is right about taxes
4     </h1>
5     <hr/>
6     <p >
7         CANNON FALLS, Minnesota (Reuters) - Small-town Americans probably don't make as much money as Warren Buffett, but they pay more of their income in taxes, President Barack Obama said on Monday, citing the billionaire investor to argue that the government needs more revenues to balance the budget.
8     </p>
9 </body>

另外，如果需要显示虚线等效果，可以这样来做：

1 hr {
2          height: 1px;
3          border: 0;
4          border-bottom: 1px dashed #000000;
5 }

 

 

posted @ 2012-05-02 11:08  令狐葱★  阅读(382)  评论(0)  编辑  收藏  举报