浏览器兼容问题

什么是浏览器兼容问题

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析, 造成页面显示效果不统一的情况。

这里, 我一共统计了6种可能会导致浏览器兼容的问题

1. 不同浏览器的标签默认的外边距和内边距不同

问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。

碰到频率:100%

解决方案:CSS里 (初始化)

*{margin:0;padding:0;}

备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

2. 块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大

问题症状:常见症状是IE6中后面的一块被顶到下一行

碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)

解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性

备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。

3. 设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度

问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度

碰到频率:60%

解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。(也可以设置font-size:1px)

备注:这种情况一般出现在我们设置小圆角背景的标签里。 出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。 即使你的标签是空的,这个标签的高度还是会达到默认的行高。

4. 元素水平居中问题

解决方案

FF: margin:0 auto;

IE: 父级{ text-align:center; }

5. const问题

const char var; //var这个变量现在变成“只读变量”,任何对var修改的语句都被编译器视为错误。

说明:Firefox下,可以使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量.

6. 模态和非模态窗口问题

说明:IE下,可以通过showModalDialogshowModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用

window.open(pageURL,name,parameters)

方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口.
例如:

var   parWin   =   window.opener;   parWin.document.getElementById("Aqing").value   =   "Aqing";

7. float的延续性

说明:在i.e.浏览器中,如果使用float设置元素浮动对齐。如果不关闭浮动,将会对后面的元素标签延续浮动。

解决方法:在设置float的元素后面加上clear:both,关闭浮动。

(完)

分享到