CSS兼容问题

Posted 2020-07-01 艳阳天

 1.由于W3C盒子模型和IE盒子模型的两个标准不一致，出现了浏览器的兼容性问题。我们通常采用标准盒子模型（加上doctype声明）可以减少兼容性问题。

 2.关于默认的一些属性设置对页面显示的影响，可做如下统一调整：

*{ margin:0px; padding:0px;}

body{ font:12px "微软雅黑","幼圆","宋体"; background:#f0f0f0; color:#666;}

ul,ol,li{ list-style:none;}

div{ margin:0px auto; overflow:hidden;}

img{ display:block; border:none;}

 

 3.关于IE6浏览器中显示错乱的情况做如下解释：

•    双倍边距： 出现浮动并且设置浮动边距，第一个元素会出现双倍边距 （ 解决方法： display:inline;）

         

•    div浮动层叠: 第一个div浮动，紧邻的DIV会环绕重叠，而在IE6下会靠近但是有缝隙  （解决方法:  两个DIV都必须采用浮动）

      

•    div高度自适应: 在高度为auto，div的高度不会随着内容的增多自动适应高度（ 解决方法:  overflow:hidden）

 

•    超级链接伪类： IE6只支持链接的伪类,比如a:hover  （ 解决方法:请采用Jquery解决该问题）

 

•    鼠标显示为手型： IE6下如果设置cursor:hand;是不会显示手型光标的（ 解决方法: cursor:pointer;)

 

•    优先级： 如果样式冲突需要提升优先级 ( 解决方法: important)

 

 4.png在IE6下无法透明的情况：采用js解决，在网上下载：mypng.js加入到网页中即可解决。

 5.IE6下不支持fixed固定定位情况：采用js解决，如果采用js出现抖动可尝试给html增减一个背景属性；

html{ background:url(1.jpg);}

（图片不一定真实存在）

 6.css hack

如IE6 给css属性前加_可以让IE6下能够单独识别！

<!--[if lte IE 6]>

<![endif]-->

（可参看http://blog.csdn.net/freshlover/article/details/12132801及http://www.kwstu.com/Admin/ViewArticle/201409011604277330）