首页 > 代码库 > 浏览器兼容总结

浏览器兼容总结

一:IE7中ol 列表数值不增加

   表现如下图:

     

       代码如下   

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>浏览器兼容问题——测试</title>    <style>        ol{            list-style-position: inside;        }        li{            width:300px;            border-bottom: 1px dotted red;        }    </style></head><body>    <ol>        <li>aaaaaaaaaaa</li>        <li>aaaaaaaaaaaaaaa</li>        <li>aaaaaaaaaaaaaaaaa</li>        <li>aaaaaaaaaaaaaaaaaaaaa</li>        <li>aaaaaaaaaaaaaaaaaaa</li>    </ol></body></html>
ol列表数值不增加

  原因:对 li 设置了宽度;

  解决办法:取消对 li 设置的宽度,改为对ol设置;

  相同原因的bug:当li列表的内容显示不止一行的时候,IE7中list-style-image前的图片错位;同样也是上边的解决办法。

二:元素前有绝对定位元素的时候,margin-top在IE7中不支持

  解决办法一:对父元素设置padding-top

  解决办法二:在该元素之前,即绝对定位元素之后,添加空标记,如<div></div>

  

浏览器兼容总结