1、IE6的双倍边距BUG
问题:IE6中,浮动到父元素边上元素,如果具有margin值,margin值会以双倍显示
解决:为浮动元素添加属性_display:inline;
2、IE6中li元素的垂直间隙
问题:IE6中li的子元素浮动的时候,li之间会产生垂直间隙,撑开ul使高度增加
解决: 方法(1)为li添加浮动,li {float:left/right;}
方法(2)定义li元素的垂直对齐方式,li {vertical-align:middle;}//其他也可以;
3、IE6-7下display:inline-block无效
解决: { *display: inline; *zoom:1; }
4、IE6浮动元素与非浮动元素相邻的3px间距bug
解决:为浮动元素添加一个-3px的margin值,如元素左浮动时:{_margin-right:-3px;}
5、IE6及更早浏览器,只有a元素支持:hover属性
解决:JS添加
6、IE6中定位位置错误
问题:父级(position:relative;)失效,那么在ie6中“绝对定位容器”的left和bottom就会有问题。
(PS:top和right表现正常)
解决:在“相对定位的父容器”上加入 zoom:1
7、在IE6-7下父级的overflow包不住相对定位子元素
问题:在IE6,7下,子元素有相对定位的话,父级的overflow包不住子元素
解决:方法(1)给父级也加相对定位,即:父级{position:relative;}
方法(2)在父窗口加上overflow:auto;_zoom:1
8、IE6中绝对定位1像素偏差
问题:IE6下父级参照物宽高为奇数时,绝对定位元素设置了right和bottom为0或者left和top为100%时,仍会有1px的空隙
解决:参照物宽高设置为偶数(只有偶数才行)
9、IE6-7中表单元素偏离
问题:当某些“表单元素”的“父元素上触发了haslayout”后,这些表单元素会以上一级“元素上的margin-left值”偏离
解决:方法(1)表单元素添加margin-left负值
方法(2)在表单元素外面添加一个div
10、IE6中定位元素消失
问题:ie6中,当容器子元素中同时具有具有浮动元素和绝对定位元素时,绝对定位的子元素会消失
解决:方法(1)绝对定位元素设置清楚浮动clear:both;如果浮动元素在文档顺序上排列在绝对定位元素之后,
还要为浮动元素设置{_margin-right:-3px;}同问题4;
方法(2)避免定位元素与浮动元素同级,此处将span元素嵌套到另一个元素内
11、IE6-7的a链接失效
问题:ie6、7,对于,有时span触发了a属性,那么图片区域将点击无效
解决:给图片设置position:relative;z-index:-1;再给a设置cursor:pointer;
扩展问题:超链接hover:点击后失效
使用正确的书写顺序 link visited hover active
12、IE6 overflow:visiable;会撑开容器//ie6无解、不支持用overflow:hidden来清除浮动,
解决:_zoom:1清除浮动;overflow:hidden;的主要用途是溢出隐藏。
扩展问题:IE float浮动 子元素不能撑开父容器
方法(1).clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 但是它不能通过w3c,所以我们可以用条件注释,才可以通过*/
.clearfix {
zoom:1; /针对IE/
}
方法(2)/* 分别在两段 css 块中设置 这样可以不必使用zoom:1;又通过W3C,又不需要用条件注释*/
.clearfix{display: block;
}
或者
/* 或者给父容器height:1% 因为1%并不会改变实际高度 这样也可以通过W3C */
.clearfix {
height:1%;
}
13、IE6-7 下不支持fixed
解决:方法(1) _position:absolute;
_top:expression(eval(document.documentElement.scrollTop+100));
方法(2)用JS代替
14、IE6最小高度
解决:IE6下最小高度19px, 加上overflow: hidden; 可解决最小高度问题
15、IE6下input标签会留有空隙
解决:给input加浮动
16、IE6input输入类型表单背景图片会移动
问题:在IE6,7下输入类型的表单控件输入文字的时候,背景图片会跟着一块移动。
解决:方法(1)背景图片设置fixed属性_background: url(“X.jpg”) no-repeat fixed;
方法(2)把图片加给父级
17、IE6下溢出问题
问题:当浮动元素之间出现内联元素或注释并且宽度与父元素相差3px以内时,会溢出
解决:避免使用,即:父元素-子元素>3像素,或者overflow: hidden;应该也可以
扩展问题:在IE6及以下版本中在解析百分比时,会按四舍五入方式计算从而导致50%加50%大于100%的情况。
解决:给右面的浮动元素添加声明:clear:right; 意思:清除右浮动。
clear:left:清除左浮动 clear:both:清除两边的浮动
18、IE6不支持最少最低宽高
解决:{ _width:
expression(document.body.clientWidth < 300 ? “300px” ? document.body.clientWidth > 600 ? “600px” : “auto”)); } {
_height: expression( this.scrollHeight < 200 ? “200px” : ( this.scrollHeight > 400 ? “400px” : “auto”)); }
19、IE6不支持边框点线仅仅dotted 1px
解决:切图片做背景
20、IE6图片下的间隙
解决:img加上 display: block; vertical-align:top;
21、ie6-8不支持opacity,rgba
解决:filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
filter:alpha(opacity=70)progid:DXImageTransform.Microsoft.gradient(startColorstr=#A9A9A9,endColorstr=#A9A9A9);
22、select在IE6下,遮盖挡不住select
解决:使用iframe嵌套弹出内容
23、IE6表单控件加border:none无效
问题:在IE6,7下输入类型的表单控件加border:none无效。
解决:重置input的背景,就是加上背景色
24、IE6下png显示不透明
问题:ie6不支持png24的图片
解决: 方法(1)使用png8格式图片
方法(2)js解决:DD_belatedPNG_0.0.8a.js;DD_belatedPNG.fix(’.box’);
25、IE6没有办法定义1px左右的高度容器
解决:verflow:hidden; zoom:0.08; line-height:1px;
26、IE6下tr和tbody或者thead同时加样式,tr样式会覆盖掉tbody和thead的样式
解决:不要tr加样式同时再去加tbody和thead样式
27、IE6下margin:0 auto无法居中
解决:对其父容器使用
…
一行代码解决IE6~IE8以及IE兼容模式下的兼容问题
<meta http-equiv=“X-UA-Compatible” content=“ie=edge,chrome=1” />
/ CSS属性级Hack /
color:red; /* 所有浏览器可识别*/
_color:red; /* 仅IE6 识别 /
color:red; / IE6、IE7 识别 /
+color:red; / IE6、IE7 识别 /
+color:red; / IE6、IE7 识别 /
[color:red; / IE6、IE7 识别 /
color:red\9; / IE6、IE7、IE8、IE9 识别 /
color:red\0; / IE8、IE9 识别/
color:red\9\0; / 仅IE9识别 /
color:red \0; / 仅IE9识别 /
color:red!important; / IE6 不识别!important 有危险*/
/ CSS选择符级Hack /
html #demo { color:red;} / 仅IE6 识别 */
+html #demo { color:red;} / 仅IE7 识别 /
body:nth-of-type(1) #demo { color:red;} / IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 /
head:first-child+body #demo { color:red; } / IE7+、FF、Chrome、Safari、Opera 可以识别 /
:root #demo { color:red\9; } : / 仅IE9识别 */
/ IE条件注释Hack /
<!-[if IE 6]>此处内容只有IE6.0可见<![endif]->
<!-[if IE 7]>此处内容只有IE7.0可见<![endif]->
暂时先这样,尽量完善++