21、浏览器兼容性问题

备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input/img标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

5、图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距（谷歌、qq浏览器都有），通配符清除间距也不起作用。
解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（也可使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以尽量不要使用）

6、标签最低高度设置min-height不兼容

问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容

解决方案：如果我们要设置一个标签的最小高度50px，需要进行的设置为：

备注：在B/S系统前端开发时，有很多情况下我们有这种需求。当内容小于一个值（如300px）时，容器的高度为最小高度300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

overflow：visible 默认值，内容不会被修剪，会呈现在元素框之外。

overflow：hidden 内容会被修剪，并且其余内容是不可见的。

7、hack方法兼容

解决方法：

代码示例	针对的浏览器
_width:400px;	IE6
+width400px;	IE6 IE7
*width:400px;	IE6 IE7
Width:200px\9;	IE6~IE10
Width:100px\0;	IE8~IE1

\9 ：ie10之前的ie浏览器解析的代码
+或者* ：ie7包括7之前的ie浏览器
_：表示ie6包括6之前的ie浏览器

hack方法：对某种浏览器进行样式设置，从而达到所有浏览器显示的效果一致，这种标识不同浏览器的方法就是 hack。简单地说就是可以通过 hack 技术，只针对某一种或几种浏览器进行样式设置

8.、浮动下，ie会产生的双倍距离

9、IE与宽度和高度的问题

IE不认得min-这个定义，但实际上它把正常的width和height当作最小的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

10、页面的最小宽度

问题：min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。

解决：IE浏览器无法为<body>元素设置min-width，因此要让这个属性起作用，我们需要走点弯路。首先在<body>后面插入一个<div>，然后在CSS里面定义该div的最小宽度为600px：

#container
{
    min-width: 600px;
    width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

第一个属性min-width：是最小宽度定义的标准写法；

第二个属性width：是只有IE能够理解的javascript表达式，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

11.、IE6下line-height默认行高bug

解决方法：为line-height设值 或者 overflow:hidden 或 zoom:0.08

12、水平居中的问题

问题：设置 text-align: center

ie6-7：文本居中，嵌套的块元素也会居中；

ff /opera /safari /ie8：文本会居中，嵌套块不会居中。

解决：对嵌套的块元素设置，实现居中

相当于margin-left:auto;margin-right:auto

13、td高度的问题

问题：table中td的高度都不包含border的高度，但是oprea和ff中td的高度包含了border的高度

解决：设置line-height和height一样。在ie中如果td中的没有内容，那么border将不会显示

14、div嵌套p时，出现空白行

1）问题：div中显示文本，

ff、oprea、Chrome：top和bottom都会出现空白行，

ie：不会出现空白行。

2）解决：设置p的margin:0px，再设置div的padding-top和padding-bottom为0

15、子容器宽度大于父容器宽度时，内容超出

问题：子DIV的宽度和父DIV的宽度都已经定义，如果其子DIV的宽度大于父DIV的宽度

IE6：父DIV的宽度将会被扩展，

其他浏览器：父DIV的宽度将不会扩展，子DIV将超出父DIV

解决：父标签使用overflow:hidden，避免扩展。

16、chrome中的绝对定位无效（针对td元素）

问题：设置td的 position:relative，然后给它包含的一个容器使用position:absolute进行定位

在IE是有效的，但在FF和Chrome下却不可以。

解决：

设置td的display:block。

17、有关a链接的四种状态

a:link 未访问时

a:visited 访问过后

a:hover 鼠标滑过

a:active 激活时

这四个顺序是固定的：l,v,h,a

18、！important可以提升样式优先级最高，但在IE6下会失效

19、IE6在块元素、浮动、设定marin时造成margin双倍（双边距）

问题：IE6会错误的把浮动方向的margin值双倍计算。

解决方法：display:inline （个人觉得较好解决方法是避免float和margin同时使用）

20、行标签之间会有一小段空白（IE6）

解决方法：float或结构并排

21、li之间会有间距（IE6）

解决方法：float: left;

22、块元素中有文字及右浮动的行元素，行元素换行（IE6）

解决方法：将行元素置于块元素内的文字前

23、子级中有设置position，则父级overflow失效（IE6）

问题：在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素

解决方法：为父级设置position:relative

24、躲猫猫bug

在IE6和IE7下，躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一些定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。

解决方法很简单：
1.在（那个未浮动的）内容之后添加一个<span style="clear: both;"> </span>

2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;

可参考：

1） https://blog.csdn.net/bluesqsr/article/details/5911038?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162259721216780264045038%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162259721216780264045038&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-2-5911038.pc_search_result_control_group&utm_term=IE%E6%8D%89%E8%BF%B7%E8%97%8F%E7%9A%84%E9%97%AE%E9%A2%98&spm=1018.2226.3001.4187

2）https://blog.csdn.net/rhinemetal/article/details/6908916?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162259721216780264045038%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162259721216780264045038&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-1-6908916.pc_search_result_control_group&utm_term=IE捉迷藏的问题&spm=1018.2226.3001.4187

25、3像素间距bug

问题：在IE6中，当文本(或无浮动元素)跟在一个浮动的元素之后，文本和这个浮动元素之间会多出3像素的间隔。

解决：
给浮动元素添加 margin-right:-3px；

26、绝对定位元素的1像素间距bug

问题：IE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会产生错误。

解决：给父元素定义明确的高宽值，但对于液态布局没有完美的解决方法。

液态布局：指在不同分辨率/浏览器宽度下，依然保持满屏，不会出现滚动条。就像液体一样充满了屏幕

二、javascript部分

1、document.formName.item(“itemName”) 问题

问题：

1）IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];

2）Firefox下,只能使用document.formName.elements["elementName"].

解决方法: 统一使用document.formName.elements["elementName"].

2、集合类对象问题

问题：

1）IE下,可以使用()或[]获取集合类对象;

2）Firefox下,只能使用[]获取集合类对象.

解决方法:统一使用[]获取集合类对象.

3、自定义属性问题

问题：

1）IE：可以使用获取常规属性的方法获取自定义属性,也可以使用getAttribute()获取自定义属性;

2）Firefox：只能使用getAttribute()获取自定义属性.

解决方法:统一通过getAttribute()获取自定义属性.

4、eval(“idName”)问题

问题：

1）IE：可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;

2）Firefox：只能使用getElementById("idName")来取得id为idName的HTML对象.

解决方法:统一用getElementById(“idName”)来取得id为idName的HTML对象.

5、const问题

问题：

1）IE：只能使用var关键字来定义常量

2）Firefox：可以使用const关键字或var关键字来定义常量;

解决方法: 统一使用var关键字来定义常量.

6、window.event问题

问题：window.event只能在IE下运行,而不能在Firefox下运行。这是因为Firefox的event只能在事件发生的现场使用.，Firefox必须从源处加入event作参数传递。IE忽略该参数，用window.event来读取该event。

解决方法:

function Submitted(evt) {
evt=evt?evt:(window.event?window.event:null);
}

7、event.x与event.y问题

问题：

1）IE：even对象有x,y属性,但是没有pageX,pageY属性;

2）Firefox：even对象有pageX,pageY属性,但是没有x,y属性.

解决方法: 使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

8、event.srcElement问题

问题：

1）IE：event对象有srcElement属性,但是没有target属性;

2）Firefox：even对象有target属性,但是没有srcElement属性.

解决方法: 使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target. 请同时注意event的兼容性问题

9、window.location.href问题

问题：

1）IE或者Firefox2.0.x：可以使用window.location或window.location.href

2）Firefox1.5.x：只能使用window.location.

解决方法: 使用window.location来代替window.location.href.

10、body问题

Firefox的body：在body标签没有被浏览器完全读入之前就存在；

IE的body：则必须在body标签被浏览器完全读入之后才存在.

11、对象宽高赋值问题

问题：FireFox中类似 obj.style.height = imgObj.height 的语句无效

解决方法：统一使用 obj.style.height = imgObj.height + “px”;

12、innerText的问题

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

解决方法：在非IE浏览器中使用textContent代替innerText

C.&H.

关注

1
点赞
踩
5

收藏

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

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。解决方案：在css中使用通配符 *备注：这个是最常见的也是最易解决的一个
复制链接

扫一扫