-

史上最全的浏览器兼容性问题和解决方案

WEB前端

浏览器兼容性问题是指因为不同的浏览器对同一段CSS代码解析不同导致页面显示效果不统一的情况。一般情况下,我们希望用户无论使用什么浏览器来查看网页效果都应该是一样的。浏览器的兼容性问题是Web前端开发人员经常会碰到的和必须要解决的问题。下面雷雪松整理出来了史上最全的浏览器兼容性问题和解决方案。

一、浏览器兼容性问题总结
1、双倍浮动边距:
原因:多个并列浮动元素设置了左或右边界值(x),ie6下第一个浮动元素的左或右的边界值为2倍(2x);
解决:为第一个浮动元素添加display:inline;样式;

2、高度不能自适应:
原因:多个并列浮动元素的父级高度不能被撑开。
解决:在最后一个浮动元素后添加<div class=”clear”></div> .clear {clear:both;}

3、上下边界不被识别:
原因:父级元素未指定高度,margin-top和margin-bottom解析错误
解决:在该元素的父一级元素上添加样式:overflow:auto; display:inline-block;
备注:当元素被设置成inline-block时候,最后给该元素指定宽度;

4、IE6不识别微型高度:
原因:IE6不能识别低于当前字高的高度
解决:为该元素设置font-size:0 / overflow:hidden;

5、IE6链接伪类的问题:
原因:IE6不识别P:hover,只能识别a:hover
解决:用a:hover替换之。

6、IE6、7阶梯列表问题:
原因:浮动元素未指定宽度;
解决:为浮动元素指定确定宽度

二、兼容(HACK)技术
1、属性过滤

1
2
3
4
5
#nav {
_margin:100px; /*只IE6识别*/
*margin:100px; /*只IE6、IE7识别*/
margin:100px\0/; /*只IE8识别*/
}

2、选择器过滤:

1
2
3
4
5
6
7
8
9
10
* html #nav {margin:10px; border:1px #f00 solid;} /*仅IE6识别*/
*+html #nav {margin:100px; border:1px #f00 solid;} /*仅IE7识别*/
/*针对Firefox*/
@-moz-document url-prefix() {
#nav{ width:200px; }
}
/*针对Safari & Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
#nav{ width:300px; }
}

备注:关于Chrome中文版12号以下的字体不识别,解决方案,设置样式如下:

1
2
3
4
5
html {-webkit-text-size-adjust:none;}
/*针对Opera*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
#nav{ width:400px; }
}

3、样式表过滤

1
2
3
4
5
6
<!--[if ie 6]> 仅ie6识别的html <![endif]-->
<!--[if lt ie 6]> 小于ie6识别的html <![endif]-->
<!--[if gt ie 6]> 大于ie6识别的html <![endif]-->
<!--[if ie]> 仅ie识别的html <![endif]-->
<!--[if lte ie 6]> 小于等于ie6识别的html <![endif]-->
<!--[if gte ie 6]> 大于等于ie6识别的html <![endif]-->

三、注意事项
记得清除漂浮。(在具有float元素的容器底部加入清除漂浮)
漂浮元素尽量给一个确定的宽度。
尽量使用padding代替margin。
若同时有float及margin,加入display:inline。
尽量避免使用绝对定位进行布局;若使用,需明确指定z-index, top, left;
尽量避免使用半透明png图片(PNG-24);若使用,用PNG修复补丁修复之;
若出现宽度被撑开现象,设置overflow:hidden;
若出现莫名padding,设置font-size:0及overflow:hidden;

四、其他技巧
1、FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2、 居中问题.
a).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
b).水平居中. 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.

来源:史上最全的浏览器兼容性问题和解决方案

39 评论 “史上最全的浏览器兼容性问题和解决方案

    史上最全的浏览器兼容性问题和解决方案_PHP程序员,雷雪松的博客

    hwqeenkyqz 评论:
    2017年3月15日 下午7:18

    史上最全的浏览器兼容性问题和解决方案_PHP程序员,雷雪松的博客
    hwqeenkyqz http://www.gpuzh582414ql3566n2j549mzmej1n8us.org/
    ahwqeenkyqz
    [url=http://www.gpuzh582414ql3566n2j549mzmej1n8us.org/]uhwqeenkyqz[/url]

    qdetkykykz 评论:
    2017年3月15日 下午7:20

    史上最全的浏览器兼容性问题和解决方案_PHP程序员,雷雪松的博客
    aqdetkykykz
    qdetkykykz http://www.g2925ojmff711m9xmw09b6cst1z546z9s.org/
    [url=http://www.g2925ojmff711m9xmw09b6cst1z546z9s.org/]uqdetkykykz[/url]

    tpzrpgn 评论:
    2017年3月15日 下午7:33

    史上最全的浏览器兼容性问题和解决方案_PHP程序员,雷雪松的博客
    tpzrpgn http://www.gb7xj4dw62klb7392dp70h935dq8q97os.org/
    atpzrpgn
    [url=http://www.gb7xj4dw62klb7392dp70h935dq8q97os.org/]utpzrpgn[/url]

    zevhhroqet 评论:
    2017年3月15日 下午7:57

    史上最全的浏览器兼容性问题和解决方案_PHP程序员,雷雪松的博客
    azevhhroqet
    zevhhroqet http://www.g42vos5qz5a7714n4025wsp1hptgx789s.org/
    [url=http://www.g42vos5qz5a7714n4025wsp1hptgx789s.org/]uzevhhroqet[/url]

    LarryPup 评论:
    2017年5月28日 上午12:29

    http://iapple-wedding.com 台北板橋婚沙

    Kiethcic 评论:
    2019年3月9日 下午3:21

    XYZ|國中基測|基測|基測歷屆試題|命題光碟|基測中心|基測試題滿1000送200

    http://xyz.net.tw/

    zentAfferbWen 评论:
    2019年3月14日 下午11:47

    pandora
    pandora
    锘?a href=”http://www.canada-pandora.ca”>pandora canada
    yeezy
    pandora eshop
    adidas yeezy
    yeezy
    pandora sito ufficiale
    hogan online saldi 70
    bracciali pandora
    yeezy
    pandora
    yeezy
    yeezy boty
    yeezy boost 350
    pandora cz
    pandora bracelet
    hogan outlet online
    adidas yeezy boost
    pandora jewelry official site

    zentAfferbWen 评论:
    2019年3月26日 上午12:48

    yeezy 500 salt
    pandora
    hogan online saldi 70
    yeezy boost 350 v2 sesame
    yeezy boost
    yeezy
    yeezy boost 350 v2
    pandora canada
    anelli pandora
    bracelet pandora
    pandora eshop
    yeezy 350 static
    yeezy 350 hyperspace
    yeezy 700 mauve
    yeezy
    锘?a href=”http://www.canada-pandora.ca”>pandora canada
    yeezy boost 350 v2 clay
    adidas yeezy
    yeezy sesame
    yeezy 350 butters
    bracciali pandora
    yeezy 500 salt
    yeezy hyperspace
    yeezy 350
    pandora rings
    bracelet pandora
    yeezy boost
    yeezy static
    pandora jewelry official site
    hogan outlet online
    yeezy 350
    yeezy 700 salt

    zentAfferbWen 评论:
    2019年4月28日 下午6:21

    hogan outlet online
    yeezy 500 salt
    pandora
    yeezy boost
    bracelet pandora
    拧perky pandora
    pandora jewelry
    yeezy boost 350 v2
    yeezy boost
    bracciali pandora
    boty adidas yeezy
    yeezy
    yeezy 350 hyperspace
    pandora charms
    yeezy boost
    pandora 70 di sconto
    锘?a href=”http://www.canada-pandora.ca”>pandora
    yeezy 500 utility black
    yeezy 700 wave runner
    yeezy hyperspace
    yeezy 350 static
    yeezy 350 static
    yeezy 350 butters
    yeezy 350 clay
    hogan outlet online
    pandora rings
    yeezy boost
    yeezy boost 350 v2 sesame
    bijoux pandora
    yeezy 700 static
    yeezy boost 350
    sesame yeezy

    5ikan 评论:
    2019年5月5日 下午8:37

    楼下是疯子。哈哈

    东方小说阅读网 评论:
    2019年5月9日 下午6:56

    写的太经典了,我竟无言以对。

    you can look here 评论:
    2019年12月6日 上午12:39

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客 http://pusatdominoqq.com

    togel hk nagasaon 评论:
    2019年12月27日 下午11:56

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客
    Hey! Do you know if they make any plugins to safeguard against hackers?
    I’m kinda paranoid about losing everything I’ve worked hard on. Any recommendations?

    angka pengeluaran togel hongkong hari ini 评论:
    2019年12月28日 下午8:39

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客
    Hello, after reading this amazing post i am as well glad
    to share my experience here with mates.

    togel hongkong 评论:
    2019年12月29日 上午9:56

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客
    togel hongkong

    judi togel hongkong 评论:
    2019年12月29日 下午8:48

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客

    togel hongkong 评论:
    2019年12月29日 下午8:50

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客
    togel hongkong

    togel hongkong 评论:
    2019年12月30日 上午7:40

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客
    togel hongkong

    togel burung 评论:
    2019年12月30日 下午12:35

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客
    For latest information you have to visit web and on internet
    I found this site as a best web site for latest updates.

    wilcome to hongkongpools 评论:
    2020年1月21日 下午3:13

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客 http://01.rknt.jp/samplegazou.php?out_id=ikeme009&table=gdata&action=go&url=https://www.hongkongpool.io/

    Bandar Togel Singapore 评论:
    2020年1月25日 下午10:54

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客 http://crimsonav.com/document/index/changeMode?mode=mobile&url=http://18.182.187.26/

    Togel Online 评论:
    2020年1月26日 上午2:19

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客 http://chintaheater.com/index.php?route=module/language&language_code=en&redirect=http://18.182.187.26/

    Togel Online 评论:
    2020年1月26日 上午5:51

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客 http://bonfit.ru/bitrix/redirect.php?event1=&event2=&event3=&goto=http://18.182.187.26/

    Judi Online 评论:
    2020年1月26日 上午9:03

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客 http://cyber-mass.ru/bitrix/rk.php?goto=http://18.182.187.26/

    Togel Singapore 评论:
    2020年1月26日 下午12:17

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客 http://bijinesu-school.net/rank.php?mode=link&id=158&url=http://18.182.187.26/

    Togel Online 评论:
    2020年1月26日 下午3:31

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客 http://catshelter.be/forward.php?url=http://18.182.187.26/

    Bandar Togel Singapore 评论:
    2020年1月26日 下午6:46

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客 http://bo-online.ru/bitrix/rk.php?goto=http://18.182.187.26/

    Togel Online 评论:
    2020年1月26日 下午10:04

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客 http://ckc-moda.ru/bitrix/rk.php?goto=http://18.182.187.26/

    Togel Singapore 评论:
    2020年1月27日 上午1:28

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客 http://bsaa.edu.ru/bitrix/rk.php?goto=http://18.182.187.26/

    Judi Togel Singapore 评论:
    2020年1月27日 上午5:01

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客 http://bigvintagetube.com/cgi-bin/crtr/out.cgi?id=264&url=http://18.182.187.26/

    Togel Singapore 评论:
    2020年1月27日 上午8:20

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客 http://blue5miracle.com/uchome/link.php?url=http://18.182.187.26/

    Bandar Togel Singapore 评论:
    2020年1月27日 上午11:37

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客 http://at5.us/s.php?u=18.182.187.26%2F

    Bandar Togel Singapore 评论:
    2020年1月29日 上午12:51

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客 http://morehod.info/redirect?url=http%3A%2F%2F18.182.187.26%2F

    Data Keluaran HK 评论:
    2020年1月30日 上午8:01

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客 http://goroo-zori.ru/redirect?url=https://www.hongkongpool.io/

    Kumpulan Berita Olahraga Dan Wisata Tebaru 评论:
    2020年2月11日 上午1:25

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客
    Awesome! Its genuinely amazing post, I have got much clear idea
    about from this piece of writing.

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客 http://enews.live

    gambar mata kartun 评论:
    2020年3月3日 上午2:57

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客 https://www.std-shell.ru/bitrix/redirect.php?event1=news_out&event2=http2F%2Fwww.std-shell.ru2Fshell-lubematch%2F&event3=Shell+LubeMatch&goto=http%3A%2F%2Fwww.jshk.org%2Fmember%2Fhome%2Flink.php%3Furl%3Dhttps%3A%2F%2Fgambar2viral.blogspot.com%2F

    Bandar Togel Singapore 评论:
    2020年3月25日 下午8:18

    史上最全的浏览器兼容性问题和解决方案_雷雪松的博客 http://podonki.info/go.php?url=http://18.182.187.26/

发表评论

电子邮件地址不会被公开。 必填项已用*标注