浏览器兼容性问题

最新推荐文章于 2022-09-17 13:37:04 发布

asdfwxy

最新推荐文章于 2022-09-17 13:37:04 发布

阅读量362

点赞数

分类专栏： css 文章标签：一些兼容性处理

原文链接：https://blog.csdn.net/weixin_38536027/article/details/79375411

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS兼容技巧

1: FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.
可用important解决
　　2: 居中问题.
　　 1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过vertical-align: middle.( 注意内容不要换行.)
　　 2).水平居中. margin: 0 auto;(当然不是万能)
　　3: 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)
　　4: FF 和 IE 对 BOX 理解的差异导致相差 2px,还有设为 float的div在ie下 margin加倍等问题.
　　5: ul 标签在 FF 下面默认有list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
　　6: 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
　　7: 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

8: 针对firefox ie6 ie7的css样式

1:现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，
　　2:但是ie7对!important可以正确解释，会导致页面没按要求显示!找到一个针
　　3:对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。

现在写一个CSS可以这样：
　　#1 { color: #333; } /* Moz /
　　* html #1 { color: #666; } / IE6*/
　　+html #1 { color: #999; } / IE7*/

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

9: css布局中的居中问题
　　主要的样式定义如下：
　　body {TEXT-ALIGN: center;}
　　#center { MARGIN-RIGHT: auto;MARGIN-LEFT: auto; }
　　说明：
　　首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。
　　但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
　　需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，
　　只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

10: 盒模型不同解释
　　#box{ width:600px; //for ie6.0-w/idth:500px; //for ff+ie6.0}
　　#box{ width:600px!important //forff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

11: 浮动ie产生的双倍距离
　　#box{ float:left; width:100px;margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
　　
　　这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
　　#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;

12: IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，
　　正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
　　#box{ width: 80px; height:35px;}html>body #box{ width: auto; height: auto; min-width: 80px;min-height: 35px;}

13: 清除浮动
　　.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}
　　或者加入:after(伪对象),设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，
　　所以并不影响到IE/WIN浏览器。这种的最麻烦的……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}

14: DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left;width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{margin-right:-3px; //这句是关键}

15:属性选择器(这个不能算是兼容,是隐藏css的一个bug)
　　p[id]{}div[id]{}
　　这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
　　属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

16: IE捉迷藏的问题
　　当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

17:高度不适应
　　高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign时。
　　例
p对象中的内容
　　CSS：#box{background-color:#eee; }
　　#box p {margin-top:20px;margin-bottom: 20px; text-align:center; }
　　解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
　　
18：为什么中火狐浏览器下文本无法撑开容器的高度？:
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：
div { height:auto!important; height:200px; min-height:200px; }

19：为什么web标准中无法设置IE浏览器滚动条颜色了？

原来样式设置：

解决办法是将body换成html

20：如何定义1px左右高度的容器？:
IE6下这个问题是因为默认的行高造成的，解决的方法也有很多
例如：overflow:hidden | zoom:0.08 | line-height:1px

21：怎样使一个div层居中于浏览器中？

这里使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二

22：firefox浏览器中嵌套div标签的居中问题的解决方法

假定有如下情况：

如果要实现b在a中居中放置，一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切正常；但是在Firefox中b却会是居左的。解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为：margin: 0 auto;

23：浏览器的内核
Mozilla Firefox ( Gecko )
Internet Explorer ( Trident )
Opera ( Presto )
Safari ( WebKit )
Google Chrome ( WebKit )

腾讯TT、世界之窗、360浏览器、遨游浏览器都是给IE加了个外壳，不过如果电脑上装的是ie8的话，这些浏览器还是调用ie7的内核。搜狗浏览器比较特殊，它有两种浏览模式：一是兼容模式，该模式使用IE内核；二是高速模式，该模式使用WebKit内核。解决ie7、ie8兼容性最好的办法是在head标签中加入meta 类型
<metahttp-equiv=“X-UA-Compatible” content=“IE=EmulateIE7” />，
只要IE8一读到这个标签,它就会自动启动IE7兼容模式
在这里插入图片描述
24：如何解决浏览器的兼容性

在head标签中加入meta 类型<meta http-equiv="X-UA-Compatible"content=“IE=EmulateIE7” />，这样就解决了ie7、ie8兼容问题。现在剩下ie6、ie7、Firefox、Chrome(Safari与Chrome使用同一内核)、Opera这几种浏览器的兼容性问题，我们需要使用CSS Hack来解决该问题。代码如下所示：:

@media screen and (-webkit-min-device-pixel-ratio:0)
{
.t1{color:#336600}/* Chrome、Safari支持此处填写Chrome的css*/
}

ff、ie8、ie7、ie6、oprea、Safari兼容性css 书写模式
.t1{ color:#000000; /*所有浏览器都支持此处填写Firefox的css**/
*color:#0000FF;/* ie6 id7 支持此处填写ie7的css*/
_color:#66CCCC;/* ie6支持此处填写ie6的css*/
}
/* oprea支持此处填写oprea的css*/
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0)
{ .t1{color:#CC66FF}}
/* Chrome、Safari支持此处填写Chrome的css*/
@media screen and (-webkit-min-device-pixel-ratio:0) { .t1{color:#336600}} }

常见的浏览器兼容问题

Css样式是与DOCTYPE引入的W3C//DTD有关的，不同的dtd对css的解析也不同，我们现在统一使用

默认的内外边距不同
问题：
各个浏览器默认的内外边距不同
解决：
*{margin:0;padding:0;}
水平居中的问题
问题：
设置 text-align: center
ie6-7文本居中，嵌套的块元素也会居中
ff /opera /safari /ie8文本会居中，嵌套块不会居中
解决：
块元素设置
1、margin-left:auto;margin-right:auto
2、margin:0 auto;
3、
垂直居中的问题
问题：
在浏览器中想要垂直居中，设置vertical-align:middle; 不起作用。例如：ie6下文本与文本输入框对不齐，需设置vertical-align:middle，但是文本框的内容不会垂直居中
解决：
给容器设置一个与其高度相同的行高
line-height:与容器的height一样
关于高度问题
问题：
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。
如果设定了高度，内容过多时，ie6下会自动增加高度、其他浏览器会超出边框
解决：
1.设置overflow:hidden;
2.高度自增height:auto!important;height:100px;
IE6 默认的div高度
问题：
ie6默认div高度为一个字体显示的高度，所在ie6下div的高度大于等于一个字的高度，因此在ie6下定义高度为1px的容器，显示的是一个字体的高度
解决：
为这个容器设置下列属性之一
1、设置overflow:hidden;
2、设置line-height:1px;
3、设置zoom:0.08
IE6 最小高度(宽度)的问题
问题：
ie6不支持min-height、min-width属性，默认height是最小高度，width是最小宽度。
解决：
使用ie6不支持但其余浏览器支持的属性!important。
设置属性min-height:200px; height:auto !important;height:200px;
td高度的问题
问题：
table中td的宽度都不包含border的宽度，但是oprea和ff中td的高度包含了border的高度
解决：
设置line-height和height一样。在ie中如果td中的没有内容，那么border将不会显示
div嵌套p时，出现空白行
问题：
div中显示
文本
，ff、oprea、Chrome：top和bottom都会出现空白行，但是在ie下不会出现空白行。
解决：
设置p的margin:0px，再设置div的padding-top和padding-bottom
IE6-7图片下面有空隙的问题
问题：
块元素中含有图片时，ie6-7中会出现图片下有空隙
解决：
1、在源代码中让和在同一行
2、将图片转换为块级对象display:block;
3、设置图片的垂直对齐方式 vertical-align:top/middle/bottom
4、改变父对象的属性，如果父对象的宽、高固定，图片大小随父对象而定，那么可以对父元素设置：overflow:hidden;

5、设置图片的浮动属性 float:left;

IE6双倍边距的问题

问题：
ie6中设置浮动，同时又设置margin时，会出现双倍边距的问题
例float:left;width:100px;margin:0 100px;
解决：设置display:inline;

IE6 width为奇数，右边多出1px的问题

问题：
父级元素采用相对定位，且宽度设置为奇数时，子元素采用绝对定位，在ie6中会出现右侧多出1像素
解决：
将宽度的奇数值改成偶数

IE6两个层之间3px的问题
问题：
左边层采用浮动，右边没有采用浮动，这时在ie6中两层之间就会产生3像素的间距
解决：
1、右边层也采用浮动 float
2、左边层添加属性 margin-right:-3px;
IE6 子元素绝对定位的问题
问题：父级元素使用padding后，子元素使用绝对定位，不能精确定位
解决：在子元素中设置 _left:-20px; _top:-1px
显示手型cursor:hand
问题： ie6/7/8、opera 都支持但是safari 、 ff 不支持
解决：写成 cursor:pointer; (所有浏览器都能识别)
IE6-7 line-height失效的问题
问题：在ie中img与文字放一起时， line-height不起作用
解决：都设置成float
td自动换行的问题
问题：Table宽度固定，td自动换行
解决：设置Table的table-layout:fixed，td的word-wrap:break-word
子容器浮动后，父容器扩展问题

问题：子容器都float以后，父容器没有设定高度,父容器将不会扩展
解决：只需要添加一个clear:both的div，代码如下：

透明png图片会带背景色
问题：在ie6下透明的png图片会带一个背景色
解决：background-image: url(icon_home.png);/* 其他浏览器 */
background-repeat: no-repeat

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘icon_home.png’);/* IE6 /
_background-image: none; / IE6 */

list-style-position默认值的问题
问题：

ie下list-style-position默认为inside, firefox默认为outside
解决：css中指定为outside即可解决兼容性问题

list-style-image准确定位的问题
问题：
li前设置图片时，图片与其后的文字对齐问题
解决：
1、采用背景定位和字符缩进的方法
background:url() no-repeat left center;text-index:16px;
2、采用相对定位方法
li 设置list-style:url();
li的子元素position:relative;top:-5px;
ul标签默认值的问题
问题：
ul标签在FF中默认是有padding值的,而在ie中只有margin有值
解决：
定义ul{margin:0;padding:0;}就能解决大部分问题
IE中li指定高度后，出现排版错误
问题：在ie下如果为li指定高度可能会出现排版错位
解决：设置line-height
ul或li浮动后，显示在div外
问题：
div中的ul或li设置float以后，都不在div中
解决：
必须在ul标签后加<divstyle=“clear:both”>来闭合外层div
ul浮动后，margin变大
问题：
ul设置 float后，在ie中margin将变大
解决：
设置ul的display:inline，li的list-style-position:outside
li浮动后，margin变大
问题：
li设置 float后，在ie中margin将变大
解决：
设置li的display:inline
嵌套使用ul、li的问题
问题：
ie的bug，嵌套使用ul、li时，里层的li设置float以后，外层li不设置float, 里面的ul顶部和它外面的li总是有一段间距
解决：
设置里面的ul的zoom:1
IE6-7 li底部有3px的问题
问题：
这个bug产生的充要条件是li的子元素浮动并且li设置了以下CSS属性之一：width、height、zoom、padding-top、padding-bottom、margin-top、margin-bottom。
解决：
1、div设置clear:left|both，这时li不能设置width、height、zoom。
2、li设置float:left，这时li可以设置width、height、zoom。
3、li设置clear:left|both，这时li不能设置width、height、zoom。
4、IE6/IE7的这个Bug可以通过给li中的div设置vertical-align:top|middle|bottom解决。
IE6 垂直列表间隙的问题
问题：
li中有a且设置display:block时，ie6中列表间会出现空隙
解决：
1、li中加display:inline;
2、li使用float 然后 clear:both;
3、给包含的文本末尾添加一个空格
4、设置width
IE6 列表背景颜色失效的问题
问题：
当父元素设置position:relative;时，在ie6中第一个ul、ol、dl的背景颜色失效
解决：ul、ol、dl 都设置为position:relative;
IE6-7 列表背景颜色失效的问题2
问题：
做横向导航栏时，ul设置为float且有背景色，li设置为float。ie6-7背景颜色失效
解决：
很多ie的bug都可以通过触发layout来解决 ul添加属性
1、height:1%;
2、float:left;
3、zoom:1;
列表不能换行的问题
问题：
li设置为浮动，后面的li紧随其后，不能换行
解决：
1、为这个ul定义合适的宽高
2、给包含这个ul 的父div定义合适的宽高。
li中的内容以省略号显示
问题：
li中内容超过长度时，想以省略号显示，此方法适用于ie6-7-8、opera、safari浏览器
ff浏览器不支持
解决：
li{width:200px;white-space:nowrap;text-overflow:ellipsis;
-o-text-overflow:ellipsis; overflow: hidden; }
超链接访问过后hover样式不出现的问题
问题：点击超链接后，hover、active样式没有效果
解决：改变CSS属性的排列顺序: L-V-H-A
禁用中文输入法的问题
问题：不能在输入框中输入汉字
解决：
只在ie系列和ff中有效
ime-mode:disabled (但可以粘贴)
禁用粘贴：
οnpaste=“return false”
除去滚动条的问题
问题：
隐藏滚动条
解决：
1、只有ie6-7支持<bodyscroll=“no”>
2、除ie6-7不支持 body{overflow:hidden}
3、所有浏览器 html{overflow:hidden}
让层显示在FLASH之上
问题：
想让层的内容显示在flash上
解决：
把FLASH设置透明
1、<param name=" wmode "value=“transparent” />
2、<param name="wmode"value=“opaque”/>
去除链接虚线边框的问题
问题：
当点击超链接后，ie6/7/8 ff会出现虚线边框 ,而opera、safari没有虚线边框
解决：
ie6/7中设置为a { blr:expression(this.onFocus=this.blur()) }
ie8 和 ff 都不支持expression 在ie8 、ff中设置为 :focus { outline: none; }
css滤镜的问题
问题：
css滤镜只在ie中有效，Firefox, Safari(WebKit), Opera只能够设置透明，它们不支持滤镜filter，无法实现图片切换中间变换的效果，只能通过透明度来设置。
解决：
ff中设置透明度 -moz-opacity:0.10; opacity:0.6;
ie中只设置filter:alpha(opacity=50); 时，ie6-7失效，还要设置
1、zoom:1; 2、width:100%;
IE6背景闪烁的问题
问题：
链接、按钮用CSSsprites作为背景，在ie6下会有背景图闪烁的现象。原因是:IE6没有将背景图缓存，每次触发hover的时候都会重新加载
解决：
可以用JavaScript设置ie6缓存这些图片：
document.execCommand(“BackgroundImageCache”,false,true);
出现重复文字的问题

问题：

ff、chrome绝对定位无效
问题：
在IE给td设置position:relative，然后给它包含的一个容器使用position:absolute进行定位是有效的，但在FF和Chrome下却不可以。
解决：
设置td的display:block。
IE6 绝对定位的问题
问题：

dovapour

内容

解决： left的定位错误问题 1、给父层设置zoom:1触发layout。 2、给父层设置宽度width bottom的定位错误问题 1、给父层设置zoom:1触发layout。 2、给父层设置高度height

子容器宽度大于父容器宽度时，内容超出
问题：
子DIV的宽度和父DIV的宽度都已经定义，在IE6中如果其子DIV的宽度大于父DIV的宽度，父DIV的宽度将会被扩展，在其他浏览器中父DIV的宽度将不会扩展，子DIV将超出父DIV
解决：
设置overflow:hidden，子DIV将不会超出父DIV。
float的div闭合的问题
问题：
例如：<#div id=”floatA” ><#div id=”floatB”><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;)
这段代码在IE中毫无问题，问题出在其他浏览器中。原因是NOTfloatC并非float标签，必须将float标签闭合。
解决：
在 <#div class=”floatB”> <#divclass=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可：.clear{ clear:both;}
单选框、复选框与后面的文字对不齐
问题：
单选框、复选框与后面的文字对不齐。
解决：
.align{font-size:12px;}
.align input{ display:block; float:left;}
.align label{ display:block; float:left;padding-top:3px; *padding-top:5px;

需注意的问题：

设置padding后高度和宽带都会增加
说明：
除了ie5.5，其他所有浏览器中，设置padding以后高度和宽带都会增加
使用XHTML 1.0 Transitional后，div宽度
说明：
在使用XHTML 1.0Transitional以后div宽度都不包含border的宽度了，设置宽度的时候需要注意下。
外层相对定位，内层绝对定位

说明：
ie6下，外层div的postion: relative，并设置text-align，内层div的postion:absolute，这时内层的位置是相对于text-align而言的
例如：

position:relative

显示的大小不一致
说明：
默认字本显示问题，导致显示的大小不一致，在ie下比较小一点，其他的浏览器都一致，当你使用了造成问题时请注意。
边框重叠说明

说明：
为 table、td 都指定了边框后，然后使用border-collapse:collapse让边框重叠，可以看出在发生重叠时，Firefox是用 td 覆盖 table 的，而 IE 是用 table 覆盖 td 的。使用时候需要注意。

设置td padding的说明
说明：
设置td的padding以后高度和宽带都会增加,padding-left和padding-right的效果都一样增加了td的宽带，但是padding-top和padding-bottom的效果不一样。最好不要使用td的padding-top和padding-bottom
ul设置的说明
说明：
ul一般设置：list-style-type:none;margin:0px;padding:0px；
li一般设置：list-style-type:none;list-style-position:outside
使一个层垂直居中于浏览器中
说明：
使用百分比绝对定位,与外补丁负值的技巧,负值的大小为其自身宽度高度除以二
div {
position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px;
width:200px; height:200px; border:1px solid red;
}
万能 float 闭合
说明：
可以用这个解决多个div对齐时的间距不对，将以下代码加入GlobalCSS 中,给需要闭合的div加上 class=”clearfix” 即可

触发layout
说明：

IE6中很多Bug都可以通过触发layout得到解决.下列的CSS属性或取值会让一个元素获得layout：
position:absolute 绝对定位元素的包含区块(containing block)就会经常在这一方面出问题
float:left|right 由于layout元素的特性，浮动模型会有很多怪异的表现
display:inline-block 当一个内联级别的元素需要layout的时候就往往符用到它，这也可能也是这个CSS属性的唯一效果----让某个元素有layout
width: 除auto外的任何值
height: 除auto外的任何值
zoom: 除auto外的任何值

11、如何使连续长字段自动换行
ff最新版本 word-wrap:break-word;就可以了

ff旧版本还要使用javascript完成文字换行

12、设置滚动条颜色只对ie系列有效在html中而不是设置body

<div>, <p>, <h1>, <form>, <ul>和 <li>是块元素的例子
<span>, <a>, <label>, <input>,<img>, <strong> 和<em>是inline元素

javascript部分

document.form.item 问题
问题：
代码中存在 document.formName.item(“itemName”) 这样的语句，不能在FF下运行
解决方法：
改用 document.formName.elements[“elementName”]
集合类对象问题
问题：
代码中许多集合类对象取用时使用()，IE能接受，FF不能
解决方法：
改用 [] 作为下标运算，例：
document.getElementsByName(“inputName”)(1) 改为document.getElementsByName(“inputName”)[1]
window.event
问题：
使用 window.event 无法在FF上运行
解决方法：
FF的 event 只能在事件发生的现场使用，此问题暂无法解决。可以把 event 传到函数里变通解决：
onMouseMove = “functionName(event)”
function functionName (e) {
e = e || window.event;
…
}
HTML对象的 id 作为对象名的问题
问题：
在IE中，HTML对象的 ID 可以作为 document 的下属对象变量名直接使用，在FF中不能
解决方法：
使用对象变量时全部用标准的 getElementById(“idName”)
用 idName 字符串取得对象的问题
问题：
在IE中，利用eval(“idName”) 可以取得 id 为 idName 的HTML对象，在FF中不能
解决方法：
用 getElementById(“idName”) 代替 eval(“idName”)
变量名与某HTML对象 id 相同的问题
问题：
在FF中，因为对象 id 不作为HTML对象的名称，所以可以使用与HTML对象 id 相同的变量名，IE中不能
解决方法：
在声明变量时，一律加上 var ，以避免歧义，这样在IE中亦可正常运行
最好不要取与HTML对象 id 相同的变量名，以减少错误
event.x 与 event.y 问题
问题：
在IE中，event 对象有x,y属性，FF中没有
解决方法：
在FF中，与 event.x 等效的是 event.pageX ，但event.pageX IE中没有
故采用 event.clientX 代替 event.x ，在IE中也有这个变量
event.clientX 与 event.pageX 有微妙的差别，就是滚动条
要完全一样，可以这样：
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x
关于frame
问题：
在IE中可以用 window.testFrame 取得该frame，FF中不行
解决方法：
window.top.document.getElementById(“testFrame”).src = ‘xx.htm’
window.top.frameName.location = ‘xx.htm’
取得元素的属性
在FF中，自己定义的属性必须 getAttribute() 取得
在FF中没有parentElement，parement.children 而用 parentNode，parentNode.childNodes
问题：
childNodes 的下标的含义在IE和FF中不同，FF的 childNodes 中会插入空白文本节点
解决方法：
可以通过 node.getElementsByTagName() 来回避这个问题
问题：
当html中节点缺失时，IE和FF对 parentNode 的解释不同，例如：

FF中 input.parentNode 的值为form，而IE中 input.parentNode 的值为空节点问题： FF中节点自己没有 removeNode 方法解决方法：必须使用如下方法 node.parentNode.removeChild(node)

const 问题
问题：
在IE中不能使用 const 关键字
解决方法：
以 var 代替
body 对象
FF的 body 在 body 标签没有被浏览器完全读入之前就存在，而IE则必须在 body 完全被读入之后才存在
这会产生在IE下，文档没有载入完时，在body上appendChild会出现空白页面的问题
解决方法：
一切在body上插入节点的动作，全部在onload后进行
url encoding
问题：
一般FF无法识别js中的&
解决方法：
在js中如果书写url就直接写&不要写&
nodeName 和 tagName 问题
问题：
在FF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值，在IE中，nodeName 的使用有问题
解决方法：
使用 tagName，但应检测其是否为空
元素属性
IE下 input.type 属性为只读，但是FF下可以修改
document.getElementsByName() 和document.all[name] 的问题
问题：
在IE中，getElementsByName()、document.all[name] 均不能用来取得 div 元素
是否还有其它不能取的元素还不知道（这个问题还有争议，还在研究中）
调用子框架或者其它框架中的元素的问题
在IE中，可以用如下方法来取得子元素中的值
document.getElementById(“frameName”).(document.)elementName
window.frames[“frameName”].elementName
在FF中则需要改成如下形式来执行，与IE兼容：
window.frames[“frameName”].contentWindow.document.elementName
window.frames[“frameName”].document.elementName
对象宽高赋值问题
问题：
FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法：
统一使用 obj.style.height = imgObj.height + “px”;
innerText的问题
问题：
innerText 在IE中能正常工作，但是innerText 在FireFox中却不行
解决方法：
在非IE浏览器中使用textContent代替innerText
event.srcElement和event.toElement问题
问题：
IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性
解决方法：
var source = e.target || e.srcElement;
var target = e.relatedTarget || e.toElement;
禁止选取网页内容
问题：
FF需要用CSS禁止，IE用JS禁止
解决方法：
IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;
捕获事件
问题：
FF没有setCapture()、releaseCapture()方法
解决方法：
IE:
obj.setCapture();
obj.releaseCapture();
FF:
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
if (!window.captureEvents) {
o.setCapture();
}else {
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
if (!window.captureEvents) {
o.releaseCapture();
}else {
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}

asdfwxy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浏览器兼容性问题

常见浏览器兼容性问题与解决方案所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。在学习浏览器兼容性之前，我想把前端开发人员划分为两类：第一类是精确按照设计图开发的前端开...
复制链接

扫一扫