我们都知道,不同版本浏览器对css的解析是有些分别的,特别是IE6,和IE7.虽然现在使用老版本的人数不多,但是还是有部分人在使用,我们并不能完全忽略这群用户。如下所示:我们还是应该了解一下这些浏览器兼容问题。
问题一:在IE6元素浮动,如果宽度需要内容撑开,就给里边的块元素都加浮动(不然会出不在同一行)
问题二:在IE6,7下元素要通过浮动并在同一行,就给这行元素都加浮动;
问题三:注意标签嵌套规范(
给p标签加背景颜色会出现两块bug)问题四:在IE6下元素的高度的小于19px的时候,会被当做19px来处理(解决办法:overflow:hidden;)
问题五:1px dotted 在IE6下不支持(解决办法:切背景平铺)
问题六:在IE6下父级有边框的时候,子元素的margin值消失(解决办法:触发父级的haslayout)
问题七:IE6下双边距BUG,在IE6,块元素有浮动和和横向的margin值 ,横向的margin值会被放大成两倍(解决办法: display:inline;)margin-right 一行右侧第一个元素有双边距;margin-left 一行左侧第一个元素有双边距
问题八: 在IE6,7下,li本身没浮动,但是li的内容有浮动,li下边就会产生一个间隙(解决办法:1.给li加浮动2.给li加vertical-align)
当IE6下最小高度问题,和 li的间隙问题共存的时候 给li加浮动
问题九: 当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效(暂时无解决办法)
问题十: 在IE6下的文字溢出BUG,产生条件:子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素(解决办法:用div把注释或者内嵌元素用div包起来 (父级调大))
问题十一:当浮动元素和绝对定位元素是并列关系的时候,在IE6下绝对定位元素会消失(解决办法:给定位元素外面包个div)
问题十二:在IE6,7下,子元素有相对定位的话,父级的overflow包不住子元素(解决办法: 给父级也加相对定位)
问题十三:在IE6下绝对定位元素的父级宽高是奇数的时候,元素的right值和bottom值会有1px的偏差(没有解决方法)
问题十四:在IE6下position:fixed;无法实现功能(使用js方法代替)
问题十五:在IE6,7下输入类型的表单控件上下各有1px的间隙(解决办法:给input加浮动)
问题十六:在IE6,7下输入类型的表单控件加border:none;(解决办法: 重置input的背景,或者设置border:0;)
问题十七:在IE6,7下输入类型的表单控件输入文字的时候,背景图片会跟着一块移动(解决办法: 把背景加给父级)
上面就是对不同问题的解决办法,当我们对不同浏览器设置不同的风格:
这样 在IE11下会显示“
这是IE11”其他IE下只会显示这是IE
\9 IE10之前的IE浏览器解析
+,* IE7包括IE7之前的IE浏览器解析
_IE6包括IE6之前的IE浏览器
.box{ background:Red;background:blue\9; +background:yellow;_background:green;}