一.IE6/IE7对 display-inblock支持的欠缺
Html代码:
<div class="nav"> <ul> <li><a href="">首页</a></li> <li><a href="">公司介绍</a></li> <li><a href="">联系我们</a></li> </ul> </div>
css代码:
.nav{ text-align: center; } ul li{ display:inline-block; list-style-type:none; } ul li a{ text-decoration:none; }
在主流浏览器中显示:
IE6/IE7中显示:
解决方法:
ul li{ display:inline-block; list-style-type:none; *display: inline; }
二.IE6浮动下 margin双倍边距
html代码:
<div class="test"></div>
css代码:
.test{ background:#ccc; width:80px; height:80px; margin-left:30px; float:left; }
IE6显示双倍边距
主流浏览器显示
解决方法在对应的样式中加display:inline 代码如下:
.test{ background:#ccc; width:80px; height:80px; margin-left:30px; float:left; display:inline; }
三.IE6/IE7显示垂直滚动条
表现描述:
有时候页面就几个字,根本没有超出显示范围,IE6/IE7还会显示垂直滚动条
解决方法:
.test{ overflow: auto; }
四.IE6对margin:0 auto;不会正确的进行解析
html代码:
<div class="test"> <div class="test-title"></div> </div>
css代码:
.test-title{ background:#ccc; width:80px; height:80px; margin:0 auto; }
主流浏览器显示:
IE6显示:
解决方法 在父元素中使用text-align:center,在元件中使用text-align:left:
.test{ text-align: center; } .test-title{ background:#ccc; width:80px; height:80px; margin:0 auto; text-align:left; }
五:IE6不支持css min-width与min-height
表现描述:
有时候想让一个div最小高度为100px,但ie6中识别min-height,可不识别
解决方法:
.test{ min-height:100px; height:auto ! important; height: 100px; }
意思是:新的浏览器识别出min-height这个样式,当执行到第二行的时候又有!important,所以第三行不起作用。而在ie6中解析时,它不识别min-height和!important,所以直接就解析第三行height样式,继而间接实现了min-height。同理min-width也可以用这种方法实现
六.png图片透明
表现描述:png的图片在ie6中,透明的部分会显示成灰色
解决方法:
是一个争对png的hack,代码如下
img { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...); }
时间: 2024-10-12 09:24:38