浏览器兼容问题

什么是浏览器兼容问题？

百度百科：浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。

产生浏览器兼容问题的原因？

  • 不同的浏览器使用的内核及所支持的HTML等网页语言标准不同；
  • 用户客户端所处的环境不同（如分辨率不同）造成的显示效果不能达到理想效果。

针对不同的问题，解决方案有哪些？

1. CSS Hack

IE6认识的hacker 是下划线_ 和星号 *
IE7 、遨游认识的hacker是星号 *
比如这样一个CSS设置：

/* 注意书写次序 */
height:300px;
*height:200px;
_height:100px;

IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识heihgt， 所以当IE6读到height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；
IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

/* 针对 IE 6的专属CSS Hack网站设计代码 */
#id{
    _display:block;
}

/* 针对 IE 7的专属CSS Hack网站设计代码 */
#id{
    *display:block;
}

/* 针对 IE 8的专属CSS Hack网站设计代码 */
#id{
    margin-top: 10px 9; /* IE8 */
}

/* 针对火狐的专属CSS Hack网站设计代码 */
@-moz-document url-prefix(){
    #id{
        margin-top: 10px 9; /* IE8 */
    }
}

/* 针对Safari的专属CSS Hack网站设计代码 */
@media screen and (-webkit-min-device-pixel-ratio:0){
    #id{
        margin-top: 10px 9; /* IE8 */
    }
}

/* 针对Opera的专属CSS Hack网站设计代码 */
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0){
    head~body #id{
        margin-top: 10px 9; /* IE8 */
    }
}

2. 不同的浏览器不加样式控制的情况下，各自的margin和padding差异较大

解决方案：

*{
    margin:0;
    padding:0;
}

3. float后又有横向margin，不同浏览器margin设置可能能比较大，后面的一块被顶到下一行

解决方案： 在float的标签样式控制中加入 diaplay:inline; ,将其转换为行内属性。

4. 设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度

解决方案：

  • 给超出高度的标签设置 overflow: hidden; ；
  • 设置 line-height 小于设置的高度。

5. 图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题2中提到的通配符也不起作用。
解决方案：使用float属性为img布局

6. 最低高度设置 min-height 不兼容

问题症状：因为min-height本身就是一个不兼容的css属性，所以设置min-height时不能很好的被各个浏览器兼容
解决方案： 如果我们要设置一个标签的最小高度200px，需要进行的设置为：

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

7. 点击事件

<body>
    <a href="#" onclick="doSet1(event);">点一下</a> 
    <a href="#" onclick="doSet2(event);">点两下</a> 
</body>
<script type="text/javascript">
    function doSet1(event) {
        alert(event.target.innerHTML);
    }
    function doSet2(event) {
        alert(event.srcElement.innerHTML);
    }
</script>

在IE需要点击‘点两下’，而在Firefox需要点击‘点一下’。
因为内核不同，一些内置对象的属性名称不一致，所以相同的js脚本在某个浏览器下不一定能用。

解决方案：使用jQuery，jQuery内部已经实现了屏蔽浏览器差异。

8. 透明度兼容设置

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

opacity: 0.5; 它是CSS中的当前标准，在大多数版本中起作用。如果所有浏览器都支持当前的标准，则这将是您所需要的。当然，他们不这样做。
filter:alpha(opacity=50); 用于IE
-moz-opacity:0.5; 支持老式的Mozilla浏览器版本，比如Netscape Navigator。
-khtml-opacity:0.5; 旧版本的Safari（1.x），当它正在使用的引擎出现时仍然被称为KTHML，反对当前的WebKit。

9. input边框问题

解决方案：

border: 0;

或

border: 0 none;

或

border: none;
border-color: transparent;

10. Box Model的bug(盒子模型bug)

描述：给一个元素设置了高度和宽度的同时，还为其设置margin和padding的值，会改变该元素的实际大小。
解决办法：在需要加 margin和padding的div内部加一个div,在这个div里设置margin和padding值。

11. IE6中的列表li楼梯状bug

描述：通常在li中的元素（比如a）设置了浮动float，但li本身不浮动。
解决办法：

ul li{float:left;}

或

ul li{display:inline;}

12. li空白间距

描述：在IE下，会增加li和li之间的垂直间距
解决办法：给li里的a显式的添加宽度或者高度

li a{width:20px;}

或

li a{display:block;float:left;clear:left;}

或

li {display:inline;}
li a{display:block;}

或
在每个列表li上设置一个实线的底边，颜色和li的背景色相同

13. overflow：auto;和position:relative的碰撞

描述：此bug只出现在IE6和IE7中，有两个块级元素，父元素设置了overflow：auto;子元素设置了position:relative;且高度大于父元素，在IE6-7中子元素不会被隐藏而是溢出。
解决方案：给父元素也设置position:relative;

14. 浮动层的错位

描述：当内容超出外包容器定义的宽度时会导致浮动层错位问题。在Firefox、IE7、IE8及其他标准浏览器里,超出的内容仅仅只是超出边缘;但在IE6中容器会忽视定义的width值,宽度会错误地随内容宽度增长而增长。如果在这个浮动元素之后还跟着一个浮动元素,那么就会导致错位问题。
解决方案：overflow：hidden;

15. IE6克隆文本的bug

描述：若你的代码结构如下

<!--这是注释-->
    <div>
       ……
   </div>
<!--这是注释-->

很有可能在IE6网页上出现一段空白文本。
解决方案：

  • 使用条件注释
  • 删除所有注释
  • 在注释前面的那个浮动元素加上 display：inline；

16. IE的图片缩放

描述：图片在IE下缩放有时会影响其质量
解决方案：

img{ -ms-interpolation-mode:bicubic;}//这个是解决图片失真的自带属性只有IE有

17. IE6下png图片的透明bug

描述：使用透明图片,使用png24或png32图片在IE6下面显示图片会有一层淡蓝色的背景。
解决方案：

.img {
    background:url('http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png');
    _background:0;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');
}

img {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');
}

或

<imgsrc="test.png" width="247" height="216"style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');" alt="" />

18. <iframe>透明背景bug

描述：在IE浏览器中，<iframe>框架不会自动把背景设为透明
解决方案：

<iframesrc="content.html"allowTransparency="true"></iframe>

在iframe调用的content.html页面中设置

body{background-color: transparent;}

19. 禁用IE默认的垂直滚动条

解决方案：

html{
   overflow:auto;
}

20. a(有href属性)标签嵌套下的img标签，在IE下会带有边框。

解决方案:

a img {
    border:none;
}
posted @ 2018-07-06 15:53  我的诗和远方  阅读(186)  评论(0)    收藏  举报