IE CSS Bug及处理计划方案参照手册

2021-03-12 15:32 jianzhan
自然,也有特性难题。但是,今日要说的是款式的适配难题。在IE/Mozilla/Webkit/Opera4分天地的今日,IE6⑼/Mozilla(Gecko)系列/Chrome/Safari/Opera etc. 这些访问器的适配,无不让前端开发们头痛。而在这当中,最使人头痛确当数IE,非常是IE6。搞定了IE6,基础也就可以独霸半个河山了。搞定了IE,也非常于占据了7、80%的领地。你想做1个统治网页页面适配的主么?总之我是想的。
难题 访问器 DEMO 处理方式 Hacking Rules:

 

property:all-ie\9; property:gte-ie8\0;*property:lte-ie7; +property:ie7; _property:ie6;

1 input[button | submit] 不可以用 margin:0 auto; 垂直居中 IE8 bug | fixed 为input加上width 2 body{overflow:hidden;}沒有去掉翻转条 IE6/7 bug | fixed 设定html{overflow:hidden;} 3 hasLayout的标识有着高宽比 IE6/7 bug | fixed *height:0;
_overflow:hidden; 4 form>[hasLayout]元素有margin-left时,子元素中的[input | textarea] 出現2×margin-left IE6/7 bug | fixed form > [hasLayout 元素]{margin-left:宽度;}
form div{*margin-left:宽度÷2;} 5 当border-width有1条<边3条时被设定成dotted时,1px的边dotted显示信息成dashed IE7 bug | fixed 不在同1个元素上应用不一样宽度的 dotted 6 当子元素有position:relative的情况下,父元素设定overflow:[hidden|auto]非常于给子元素设定了position:visible; IE6/7 bug | fixed 给父元素设定position:relative; 7 :hover伪类不可以更改有position:absolute的子级元素的left/top值 IE7 bug | fixed 把top/left的值设定成除0%外的全部百分值;或加上1个margin-[全部方位]除0外的全部值,包含0% 8 :focus + selector {} 挑选器无效 IE8 bug | fixed 在无效挑选器后边加上1个空挑选器, :focus{} 9 目录中错乱的波动:在list中波动照片时,照片出現外溢一切正常部位;或沒有list-style IE8 bug | fixed 用情况照片更换list-style 10 th 不容易全自动承继上级元素的 text-align IE8 bug | fixed 给th加上text-align:inherit; 11 款式(包含link/style/@import(link)) 数最多容许个为是:32 IE6⑻ ─ 基本常识 99.99%的状况下,不容易遇到 12 :hover 时若background-color为#fff, 无效 IE7 bug | fixed 把background-color改为background。或,非#fff || #ffffff 13 忽视’>’后有注解的挑选器:selector> /**/ selector{} IE7 bug | fixed 官方DEMO有误 14 * html IE6 ─ HACK 只对IE6合理 15 PNG照片中的色调和情况色调的值同样,但显示信息不一样 IE6⑺ bug | fixed 运用 pngcrush 除去照片中的 Gamma profiles 16 margin:0 auto; 不可以让block元素水平垂直居中 IE6⑻ bug | fixed 给block元素加上1个width 17 应用伪类 :first-line | :first-letter, 特性的值中出現!important 会使特性无效 IE8 bug | fixed !important is evil, don’t use it anymore 18 :first-letter 无效 IE6 bug | fixed 把 :first-letter 移到离{}近期的地区,如 h1, p:first-letter{},而非 p:first-letter h1{} 19 Position:absolute元素中,a display:block, 在非:hover时仅有文字可点一下 IE6/7 bug | fixed 给a加上background, 假如情况全透明,应用background:url(‘任何网页页面中早已缓存文件的文档连接’),不强烈推荐background:url(#)[官方的处理方式],由于会提升1下HTTP恳求 20 float目录元素不水平对齐:li不设定float,a设定display:block;float:[方位],li不水平对齐 IE6/7 bug | fixed 给li设定display:inline 或 float:[方位] 21 dt, dd, li 情况无效 IE6 bug | fixed dt, dd, li{position:relative;} 22 <noscript />元素的款式在开启javascript的状况下显示信息了款式 IE6⑻ bug | fixed 运用js给<noscript />加上display:none; 23 应用filter解决的全透明情况照片的全透明一部分不能点 IE6⑻ bug | fixed 把background:none变为background:url(‘连接’),连接到自身和照片以外的任何文档 24 li内元素偏移 baseline 向往下拉 IE8 bug | fixed 给li设定display:inline 或 float:[方位] 25 目录中li的list-style无法显示 IE6/7 bug | fixed 给li加上margin-left,留室内空间来显示信息(不必加在ul上) 26 照片不可以竖直垂直居中 IE6/7 bug/fixed 加上1个空标识,并赋给”Layout”, 例如display:inline-block; 27 不可以自定指针款式 IE6⑻ bug | fixed 给指针文档设定肯定相对路径 28 情况外溢,拖拽翻转条后显示信息一切正常 IE6 bug | fixed 给父元素加上overflow:hidden避免外溢,并授予hasLayout,假如加上_zoom:1; 29 高宽比超出height界定的高 IE6 bug/fixed 加上_overflow:hidden;(强烈推荐)或_font-size:0; 30 宽度超出width界定的宽 IE6 bug/fixed 加上_overflow:hidden; 31 双倍边距 IE6 ─ 基本常识 加上display:inline到float元素中 32 margin负值掩藏:hasLayout的父元素内的非hasLayout元素,应用负边距时,超过父元素一部分不能见 IE6/7 bug/fixed 去掉父元素的hasLayout;或赋hasLayout给子元素,并加上position:relative; 33 给两个波动元素的某中1个的文本设置为斜体,另外一个元素往下拉在有斜体文本元素的下面 IE6 bug/fixed 给有斜体文本的元素加上overflow:hidden; 35 3px 间距:在float元素后的元素,会有3px间距 IE6 bug/fixed 由于是准确的3px,因此,用“暴力行为破译”吧,例如_margin-left:⑶px; 35 text-align 危害块级元素 IE6/7 bug/fixed 梳理你的float;或分设立置text-align