浏览器常见兼容性问题汇总

1、随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大，解决方案是：*{margin:0;padding:0;}

2、块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大，常出现的问题是IE6中后面的一块被顶到下一行，解决方案是：在float的标签样式控制中加入 display:inline;将其转化为行内属性

3、设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度，这是因为这些浏览器下有默认行高，解决方案是：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

4、几个img标签放在一起的时候，有些浏览器会有默认的间距，加了 *{margin:0;padding:0;} 也不起作用，这是因为多个image标签进行了换行，解决方案是：使用float属性为img布局

5、一个父标签与几个子标签嵌套，父标签不浮动，子标签float，子标签不撑开父的高度。解决方案是：a、在子标签最后清浮动{<div style="height:0;clear:both;"> </div>} b 父标签添加{overflow：hidden；} c 给父标签设置高度。对于方法a,我们在html结构中添加了额外的div标签，不利于后期阅读和维护，现在我们采用after属性来设置清除浮动，比如这里提到的父标签为<div id="container"></div>，只需要设置CSS样式#container:after{content:'.';display: block;clear: both;height: 0;overflow:hidden;visibility: hidden;}，这样就清楚了浮动，又没有增加额外的标签。

6、Ie6下，不识别最大宽、高度和最小宽高度，意即min-width/height和 Max-width/height在ie6中没效果

解决方法：(1)：.abc{border:1px blue solid;width:200px;height:200px;}

html>body .abc{width:auto;height:auto;min-width:200px;min-height:200px;}

(2)：.abc{width:200px;height:200px;_width:200px;_height:200px;}（因为ie6有一个特征，当定义一个高度时，如果内容超过高度，元素会自动调整高度。）

7、Ie6里面：如li设宽、高，并且li里面的标签浮动，那么li之间会有间距，解决方案是：li不设宽、高或者li内的标签不浮动

8、3像素问题：ie6下，当浮动元素与流动元素并列显示时，他们之间会存在三像素问题，解决方案是：让流动元素（即非浮动元素）也设置float：left就可以了

9、opacity 定义元素的不透明度，解决方案是：filter：alpha（opacity=80）；/*ie支持该属性*/ opacity：0.8；/*支持css3的浏览器*/

10、两个块元素，竖向的margin值不增加，会重叠，其间距为最大margin值。

11、优先级：被!important 注明的css属性具有最高优先级(.abc{color:red !important;})。但在ie6中!important具有一个bug:在同一组css属性中，!important不起作用。

12、火狐不识别background-position-y 或background-position-x;

13、IE6不支持fixed

1 #top{
2     position:fixed;
3     _position:absolute;
4     top:0;
5     right:20px;
6     _bottom:auto;
7     _top:expression(eval(document.documentElement.scrollTop));
8 }

14、解决 ie6 最大、最小宽高 hack方法

 1 /* 最小宽度 */
 2 .min_width{
 3     min-width:300px;
 4     _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);
 5 }
 6
 7 /* 最大宽度 */
 8 .max_width{
 9    max-width:600px;
10    _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);
11 }
12
13 /* 最小高度 */
14 .min_height{
15    min-height:200px;
16    _height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);
17 }
18
19 /* 最大高度 */
20 .max_height{
21    max-height:400px;
22    _height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);
23 }

15、z-index不起作用的 bug

ie6下首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有两个：1、父标签position属性为relative；2、问题标签含有浮动(float)属性。在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。

16、IE各版本Hack

 1 /*类内部hack：*/
 2     .header {_width:100px;}            /* IE6专用*/    //最好把IE6 hack写在最后一行
 3     .header {*+width:100px;}        /* IE7专用*/
 4     .header {*width:100px;}            /* IE6、IE7共用*/
 5     .header {width:100px\0;}        /* IE8、IE9共用*/
 6     .header {width:100px\9;}        /* IE6、IE7、IE8、IE9共用*/
 7     .header {width:330px\9\0;}    /* IE9专用*/
 8
 9 /*选择器Hack：*/
10     *html .header{}        /*IE6*/
11     *+html .header{}    /*IE7*/

17、IE6下hover只支持a标签，解决方案是可以合理嵌套a标签或是给标签用javascript添加模拟hover效果

18、IE6中png格式图片不支持透明，解决方案是使用javascript进行处理；或者使用gif、jpg图像替代掉png图片的使用。

19、input聚焦框颜色与样式各浏览器不同，解决方法是使用：outline:none，清除默认样式后再统一设置。

20、鼠标移上小手效果，IE6为cursor:hand CSS标准：cursor:pointer 所以解决方案是这两种一起设置： cursor：hand;cursor:pointer

21、CSS优先级!important在IE6 同一组CSS属性中，!important不起作用，解决方法是单独设置

转载于:https://www.cnblogs.com/yxz-turing/p/4814129.html

浏览器常见兼容性问题汇总相关推荐

前端浏览器常见兼容性问题及解决方案
目录 1. 最常见的:每个浏览器的默认margin,padding大小都不同,当设置定位时会有些许差异. 2. 图片默认有间距:当几个img标签放到一起时,有些浏览器会有默认间距,加上第一条的设置的通 ...
前端-浏览器常见兼容性问题以及解决方案
JavaScript 1.HTML对象获取问题 FireFox:document.getElementById("idName"); ie:document.idname或者doc ...
浏览器配置异常_IE浏览器常见故障及问题解决方法大全
IE浏览器常见问题解决方法.IE浏览器常见故障全指南. IE浏览器常见故障 1.发送错误报告故障现象在使用IE浏览网页的过程中,出现Microsoft Internet Explorer遇到问题需要 ...
html 引入js 兼容,JS跨浏览器兼容性解决思路及方案汇总，常见JS兼容性知识点汇总...
上篇文章我们介绍了,处理CSS浏览器兼容性的4个解决方案:浏览器CSS样式初始化.浏览器私有属性,CSS hack语法和自动化插件,有兴趣的可以看看,链接放到本文结尾本文主要介绍JS的跨浏览器兼容性 ...
浏览器兼容性问题汇总及解决方案
最近一直在调测系统在各个浏览器的兼容性问题,真是让人抓狂啊,我最爱的Firefox竟然还是出问题最多的,好伤心--把碰到的问题和查到的一些资料总结一下写在这里,一方面方便自己以后使用,另一方面希望对遇 ...
IE浏览器常见CSS兼容性问题及解决办法
IE浏览器常见CSS兼容性问题及解决办法参考文章: (1)IE浏览器常见CSS兼容性问题及解决办法 (2)https://www.cnblogs.com/kiscall/p/4679616.html ...
IE6 浏览器常见兼容问题大汇总
以下全文载自独行冰海 IE6以及各个浏览器常见兼容问题大汇总综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程 ...
常见浏览器的兼容性问题（面试重点）
众所周知,浏览器的兼容性问题是开发人员经常会遇到的问题,它是由于不同浏览器的不同对代码的解析不同,而产生的在页面上显示的效果不同.那么,现在我把从工作当中发遇到的有关兼容性问题及解决方案做个简单总结, ...
“约见”面试官系列之常见面试题第三十六篇之CSS常见兼容性问题及解决方案（建议收藏）
CSS常见兼容性问题及解决方案: 1. 上下margin重合问题: 问题描述:相邻的margin-left和margin-right是不会重合的,但是相邻的块级元素margin-top 和margin ...

浏览器常见兼容性问题汇总

浏览器常见兼容性问题汇总相关推荐

最新文章

热门文章