zoukankan      html  css  js  c++  java
  • 关于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 }

     

  • 相关阅读:
    Windows8 Metro界面下的StreamSocket连接服务器
    使用CSS控制文字溢出
    Javascript中的恒等运算符与等于运算符的区别
    Sqlserver 中删除表数据的两种方式与区别
    Linux C++ 遇到的错误
    四、Vue Router 设置动态路由
    六、Vue Router 嵌套路由
    一、Vue Router 的使用
    三、Vuex Getter
    五、Vuex Action
  • 原文地址:https://www.cnblogs.com/jiji262/p/2478704.html
Copyright © 2011-2022 走看看