一、IE6/IE7对display:inline-block的支持欠缺
#ul-menu{ margin:0; padding:0; list-style:none; } #ul-menu li{ inline-block; margin-right:15px; }
(2)HTML代码:
<ul id="ul-menu"> <li><a href="#">首页</a></li> <li><a href="#">公司介绍</a></li> <li><a href="#">联系我们</a></li> </ul>
2、解决方法:
#ul-menu li{ display:inline-block; _zoom:1; *display:inline; }
二、IE6/IE7显示垂直滚动条
html{ overflow:auto; }
三、IE6不支持css min-width与min-height
div{ min-height:100px; height: auto !important; height: 100px; }
四、PNG图片透明
img{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='图片路径', sizingMethod='crop'); }
五、IE6下浮动时margin双倍边距
#test{ width:100px; height:100px; background:#ccc; float:left; margin-left:20px; }
(2)HTML代码:
<div id="test"></div>
2、解决方法:
将对应样式增加display:inline属性
#test{
width:100px;
height:100px;
background:#ccc;
float:left;
margin-left:20px;
display:inline;
}
六、IE不能识别margin-top
1、表现描述:
顶部一个div,设置margin-top:120px;时,在主流浏览器下显示正常,在IE下没有效果
(1)HTML代码:
<body> <div class="top"></div> </body>
(2)CSS代码:
.top{ width: 1000px; height: 200px; margin-top: 120px; border: 1px solid #CCC; }
2、解决方法:
(1)仅是间距的显示,将margin-top换成padding-top即可(需注意padding对其背景的影响)。
.top{ width: 1000px; height: 200px; padding-top: 120px; border: 1px solid #CCC; }
(2).使这个块不直接跟在前面的这个绝对定位元素后面,比如在它们之间插入一个空div标签,或者交换这两个标签的前后位置
七、IE7不能按数组下标的方式读取字符串的字符
var str = "apple"; console.log(str[0]); //ie7中输出为undefined
2、解决方法:
var str="apple"; console.log(str.charAt(1)); //输出a console.log(str.substring(0,1)); //输出a console.log(str.slice(0,1)); //输出a
八、IE下option的onclick事件绑定
<script type="text/javascript"> $(document).ready(function(){ $("#selFruit option").click(function(){ alert($(this).text()); }); }) </script>
(2)HTML代码:
<select id="selFruit " multiple=”multiple”> <option value="0">apple</option> <option value="1">orange</option> <option value="2">banana</option> </select>
<script type="text/script"> $("#selFruit").click(function(){ var $opt =$(this).find('option:selected'); alert($opt.text()); }); </script>
九、IE不能支持CSS3属性nth-child
1、表现描述:
设置某一元素的第几个子元素单独的属性时,CSS3提供了nth-child属性,在Google,FireFox等浏览器下正常,但是该属性在IE下无效。
(1)HTML代码:
<ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul>
(2)CSS代码:
ul li:first-child { background: #CCC; } ul li:nth-child(2) { background: #EEE; } ul li:nth-child(3) { background: #AAA; }
2、解决办法:
用jQuery的属性解决:
$("ul li:nth-child(2)").css("background", "#CCC");
$("ul li:nth-child(3)").css("background", "#CCC");
十、上下margin重合
1、表现描述:
上面div设置margin-bottom,下面div设置margin-top。在IE和FireFox下产生了重合
(1)HTML代码:
<div class="top"> </div> <div class="bottom"> </div>
(2)CSS代码:
.top { width: 100px; height: 100px; background: #CCC; margin-bottom: 50px; } .bottom { width: 100px; height: 100px; background: #EEE; margin-top: 50px; }
2、解决方法:
统一使用上方div的margin-bottom或者下方div的margin-top。
十一、div浮动,IE产生3px的bug
1、表现描述:
左边对象浮动,右边vaiyong外补丁的左边距来定位,在IE下,右边对象内的文本会离左边有3px的间距。
(1)HTML代码:
<div class="box"> <div class="left"></div> <div class="right"></div> </div>
(2)CSS代码:
.box { float: left; width: 800px; } .left { float: left; width: 50%; } .right { width: 50%; }
2、解决方法:
(1)CSS代码中增加这行代码即可:
*html .left { margin-right: -3px; }
十二、IE6无法定义1px高度左右的容器
1、表现描述:
定义1px的容器,因为行高,导致IE6下无法定义。
2、解决方法:
overflow: hidden; | zoom: 0.08; | line-height: 1px; <style> <!-- div { background: red; } --> </style>