浏览器兼容性问题

最新推荐文章于 2024-08-02 17:20:52 发布

原创最新推荐文章于 2024-08-02 17:20:52 发布 · 451 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html5

HTML+CSS 专栏收录该内容

16 篇文章

订阅专栏

本文探讨了浏览器兼容性问题，如各浏览器标签的margin和padding默认值差异，浮动元素的margin偏差，透明度、最小高度、高度设置的不一致，以及图片排列间距。针对这些问题，提出了相应的解决方案，包括使用CSS兼容性语句，调整display和float属性，以及应用JavaScript来处理事件监听和innerText的兼容问题。

HTML+CSS

1.各浏览器标签的margin和padding的默认数值不同

利用css对标签默认值进行统一

2.块级元素float布局和margin一同使用时，margin的值比实际大一点（IE6）

在float的标签样式控制中加入 display:inline;

3.行内元素display:block，再使用float和margin，margin的值比实际大一点（IE6）

在float的标签样式控制中加入 display:inline;

4.透明度不兼容

添加兼容性语句，每个浏览器单独配置一下

transparent_class {   
     filter:alpha(opacity=50);   
        -moz-opacity:0.5;   
        -khtml-opacity: 0.5;   
        opacity: 0.5;  
 }

5.标签设置最低高度不兼容

添加兼容性语句

{
    min-height:200px; 
    height:auto
     !important; 
    overflow:visible;
}

6.标签高度较小时，实际高度大于设置高度（IE6，IE7）

添加overflow:hidden

7.图片依次排列时会有间距

使用float布局

单独设置方法

所有浏览器通用
height: 100px;
IE6 专用
_height: 100px;
IE6 专用
*height: 100px;
IE7 专用
*+height: 100px;
IE7、FF 共用
height: 100px !important;

javascript

1.事件监听兼容性

DOM0级、IE、DOM2级兼容性

2.event兼容性

e=e||window.event

4.event.target

IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性

var source = e.target || e.srcElement;

5.const关键字

iE不支持const

6. innerText的问题

innerText 在IE中能正常工作，但是innerText 在FireFox中却不行