打败IE系列:CSS Bug

2014-08-27 17:10:00
admin
原创 2781
摘要:IE系列浏览器低版本存在很多兼容性BUG,下面针对IE系列浏览器的BUG做个整理,希望对大家有帮助。
序号 问题 IE版本 解决方案
1 input[button | submit] 不能用 margin:0 auto; 居中 IE8 input 添加 width
2 body{overflow:hidden;} 没有去掉滚动条 IE6/7 设置 html{overflow:hidden;}
3 hasLayout 的标签拥有高度 IE6/7 *height:0; _overflow:hidden;
4 form>[hasLayout] 元素有 margin-left 时,子元素中的 [input | textarea] 出现 2×margin-left IE6/7 form > [hasLayout 元素 ]{margin-left: 宽度 ;}
form div{*margin-left: 宽度 ÷2;}
5 border-width 1 < 3 条时被设置成 dotted 时, 1px 的边 dotted 显示成 dashed IE7 不在同一个元素上使用不同宽度的 dotted
6 当子元素有 position:relative 的时候,父元素设置 overflow:[hidden|auto] 相当于给子元素设置了 position:visible; IE6/7 给父元素设置 position:relative;
7 :hover 伪类不能改变有 position:absolute 的子级元素的 left/top IE7 top/left 的值设置成除 0% 外的所有百分值;或添加一个 margin-[ 所有方向 ] 0 外的所有值,包括 0%
8 :focus + selector {} 选择器失效 IE8 在失效选择器后面添加一个空选择器 , :focus{}
9 列表中混乱的浮动:在 list 中浮动图片时,图片出现溢出正常位置;或没有 list-style IE8 用背景图片替换 list-style
10 th 不会自动继承上级元素的 text-align IE8 th 添加 text-align:inherit;
11 样式 ( 包括 link/style/@import(link)) 最多允许个为是: 32 IE6-8 99.99% 的情况下,不会遇到
12 :hover 时若 background-color #fff, 失效 IE7 background-color 改成 background 。或者,非 #fff || #ffffff
13 忽略 ’>’ 后有注释的选择器: selector> /**/ selector{} IE7 官方 DEMO 有误
14 * html IE6 只对 IE6 有效
15 PNG 图片中的颜色和背景颜色的值相同,但显示不同 IE6-7 利用 pngcrush 去除图片中的 Gamma profiles
16 margin:0 auto; 不能让 block 元素水平居中 IE6-8 block 元素添加一个 width
17 使用伪类 :first-line | :first-letter, 属性的值中出现 !important 会使属性失效 IE8 !important is evil, don’t use it anymore
18 :first-letter 失效 IE6 :first-letter 移到离 {} 最近的地方,如 h1, p:first-letter{} ,而非 p:first-letter h1{}
19 Position:absolute 元素中, a display:block, 在非 :hover 时只有文本可点击 IE6/7 a 添加 background, 如果背景透明,使用 background:url(‘ 任何页面中已经缓存的文件链接 ’) ,不推荐 background url(#)[ 官方的解决方法] ,因为会增加一下 HTTP 请求
20 float 列表元素不水平对齐: li 不设置 float a 设置 display:block;float:[ 方向 ] li 不水平对齐 IE6/7 li 设置 display:inline float:[ 方向 ]
21 dt, dd, li 背景失效 IE6 dt, dd, li{position:relative;}
22 <noscript /> 元素的样式在启用 javascript 的情况下显示了样式 IE6-8 利用 js <noscript /> 添加 display:none;
23 使用 filter 处理的透明背景图片的透明部分不可点 IE6-8 background:none 变成 background:url(‘ 链接 ’) ,链接到本身和图片之外的任何文件
24 li 内元素偏离 baseline 向下拉 IE8 li 设置 display:inline float:[ 方向 ]
25 列表中 li list-style 不显示 IE6/7 li 添加 margin-left ,留空间来显示(不要加在 ul 上)
26 图片不能垂直居中 IE6/7 添加一个空标签,并赋给 ”Layout”, 比如 display:inline-block;
27 不能自定义指针样式 IE6-8 给指针文件设置绝对路径
28 背景溢出,拖动滚动条后显示正常 IE6 给父元素添加 overflow:hidden 防止溢出,并赋予 hasLayout, 如果添加 _zoom:1;
29 高度超过 height 定义的高 IE6 添加 _overflow:hidden;( 推荐 ) 或者 _font-size:0;
30 宽度超过 width 定义的宽 IE6 添加 _overflow:hidden;
31 双倍边距 IE6 添加 display:inline float 元素中
32 margin 负值隐藏: hasLayout 的父元素内的非 hasLayout 元素,使用负边距时,超出父元素部分不可见 IE6/7 去掉父元素的 hasLayout ;或者赋 hasLayout 给子元素 , 并添加 position:relative;
33 给两个浮动元素的某中一个的文字设定为斜体,另一个元素下拉在有斜体文字元素的下面 IE6 给有斜体文字的元素添加 overflow:hidden;
34 3px 间隔:在 float 元素后的元素,会有 3px 间隔 IE6 因为是确切的 3px ,所以,用 暴力破解 吧,比如 _margin-left:-3px;
35 text-align 影响块级元素 IE6/7 整理你的 float ;或者分开设置 text-align