ie6,ie7,ie8 css bug兼容解决记录.docVIP

ie6,ie7,ie8 css bug兼容解决记录 发表于 2010/12/07 由 前端开发-武方博??8,424 views - 断断续续的在开发过程中收集了好多的bug以及其解决的办法，都在这个文章里面记录下来了！希望以后解决类似问题的时候能够快速解决 ，也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法！ 1：li边距“无故”增加 任何事情都是有原因的，li边距也不例外。 先描述一下具体状况：有些时候li边距会突然增?加很多，值也不固定（只在IE6/IE7有这种现象），让人摸不着头脑，仔细“研究”发现是由于其低级元素ul的padding引?起，padding的上下值对li有影响，左右无影?响。所以只好笨手笨脚地把padding去掉，换成margin。这是能解决问题，但往往不是我们想要的结果，或许?还会引起其他不必要的怪现象。 现在终于发现解决这个问题的方法，其实很简单，既然是有ul引?起的，就设置ul的显示形式为*display:inline-block;即可，前面加*是只?针对IE6/IE7有效，其他浏览器并不渲染这个属性。 2：分页数字?字体用“Arial?”加粗不抖动 !DOCTYPE?html?PUBLIC?-//W3C//DTD?XHTML?1.0?Transitional//EN?/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml?xmlns=/1999/xhtmlheadmeta?http-equiv=Content-Typecontent=text/html;?charset=gb2312/title无标题文档/titlelink?href=css/style.cssrel=stylesheettype=text/css/style?type=text/cssbody,?ul,?h1?{font-family:Arial;font-size:12px;}.page?{text-align:center;}.page?a?{display:inline-block;padding:5px?8px;text-decoration:none;border:1px?solid?#09F;background-color:#0CF;color:#FFF;}.page?a:hover,?.page?.selected?{border:1px?solid?#CCC;background-color:#FFF;color:#000;font-weight:bold;}/style/headbodyh1分页样式/h1div?class=page?a?href=#1/a?a?href=#class=selected2/a?a?href=#3/a?a?href=#4/a?a?href=#5/aa?href=#6/a?a?href=#7/a?a?href=#8/a?a?href=#9/a?a?href=#10/a?/div /body/html 3：IE6?CSS选择器区分IE6IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。/*IE6?专用?*/.content?{color:red;}/*?其他浏览器?*/divp?.content?{color:blue;} 4：IE6最小高度IE6?不支持min-height属性，但它却认为height就是最小高度。解决方法：使用ie6不支持但其余浏览器支持的属性!important。#container{min-height:200px;?height:auto?!important;?height:200px;} 5：IE6100%?高度在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%;。 6：IE6躲猫猫bug在IE6和IE7下，躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一些定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。解决方法很简单：1.在（那个未浮动的）内容之后添加一个span?style=clear:?both;?/span2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%; 7:IE6绝对定位元素的1像素间距bugIE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会