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 }

     

  • 相关阅读:
    硬件的快速迭代开发
    DAC8775芯片的使用
    单片机引脚复用使用不当会导致bug
    单片机为32bit时运算中64bit运算中遇到的bug及其规避手段
    UDS文档的阅读
    DAC124S085芯片的使用
    LSD低边驱动芯片的特点
    小时候的玩具激光灯拆解
    飞思卡尔系列单片机的censorship的使用
    TypeScript学习小结
  • 原文地址:https://www.cnblogs.com/jiji262/p/2478704.html
Copyright © 2011-2022 走看看