Web前端常见兼容性问题

一、    A伪类

• IE6不支持a以外其它任何标签的伪类；
• IE6以上的浏览器支持所有标签的hover伪类；

 

二、    Border：

• 边框样式：

              solid    实线

              dashed  虚线

              dotted   点线（IE6不兼容）

 

三、    Display：inline-block

• ie6 ie7 不支持块属性标签的inline-block;

四、    IE6双边距BUG

• IE6双边距BUG（IE6下块属性标签浮动，并且有横向margin，横向margin加倍。）：

                  a、IE6

                  b、浮动

                  c、横向margin

                  d、块属性标签（加display:inline;）

        

ü  解决办法: display:inline;

 

• margin-right 一行右侧第一个元素有双边距

        

• margin-left 一行左侧第一个元素有双边距

五、    IE6下li部分兼容性问题：

• IE6下 li部分兼容性问题：

                  a、左右两列布局，右边右浮动IE6 IE7下折行；(左边元素浮动)

                  b、IE6 IE7  li  下元素都浮动 在IE6 IE7下 li 下方会产生4px间隙问题；（加    vertical-align:top；）

• 在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙

ü  解决办法:

                                      1.给li加浮动

                                      2.给li加vertical-align

• 当IE6下最小高度问题，和 li的间隙问题共存的时候 给li加浮动

六、    固定定位

• IE6不支持固定定位；

七、    定位的兼容问题

• position:relative;

                  在 IE6 下父级的 overflow:hidden; 包不住子级的relative;

• position:absolute;

                  在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和      bottom 都有1像素的偏差。

 

八、    表单元素

• select/option 下拉选框

                  对高度的支持不兼容；

• textarea      文本域

                  各个浏览器下的默认滚动条显示不兼容

                  css3新增 resize 调整尺寸属性；

• IE6下input背景滚动；

九、    IE6下最小高度问题

• 在IE6下元素的高度的小于19px的时候，会被当做19px来处理

ü  解决办法:overflow:hidden。

十、    1px dotted 在IE6下不支持

ü  解决办法:切背景平铺

十一、      在IE6下解决margin传递要触发haslayout

• 在IE6下父级有边框的时候，子元素的margin值消失

ü  解决办法:触发父级的haslayout

十二、      在IE6下的文字溢出BUG

• 子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素

ü  解决办法:用div把注释或者内嵌元素用div包起来

十三、       

• 当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效
• 当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失

ü  解决办法:  给定位元素外面包个div

 

• 在IE6，7下，子元素有相对定位的话，父级的overflow包不住子元素

ü  解决办法: 给父级也加相对定位

 

• 在IE6下绝对定位元素的父级宽高是奇数的时候，元素的right值和bottom值会有1px的偏差

 

• 在IE6，7下输入类型的表单控件上下各有1px的间隙

ü  解决办法:给input加浮动

 

十四、      PNG24 兼容性问题

• IE6不支持png24 图片。

ü  解决方案：

JS插件(问题:不能处理body之上png24)

原生滤镜

                            _background:none;

                            _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png",                             

　　　　　　　　sizingMethod="crop");

转载于:https://www.cnblogs.com/Chuzs/p/7207621.html