浅谈浏览器兼容

浅谈浏览器的兼容性

###兼容性问题
    1.body 的 margin 和 padding
        IE6中默认的 padding/margin 要比其他浏览器大。
        解决方案:统一定义 body 的 margin/padding 的值
    2.居中布局
        在IE低版本中，对父元素使用 text-align:center 可以控制所有的元素居中。其他浏览器中，块级元素居中 margin:0 auto;
        解决方案:统一通过 margin:0 auto 设置居中
    3.元素的高度与内容
        IE低版本中，元素的高度至少包含内容，其他浏览器，内容超出高度后，溢出西显示
        解决方案:overflow:hidden
    4.子元素设置上外边距时，父元素需要设置边框或内边距
        解决方案:a.设置父元素的边框
                b.通过父元素的padding-top解决
                c.内容生成（不支持IE低版本）

CSSHack 解决浏览器兼容器问题

1.CSSHack的原理
通过 css 优先级来解决浏览器兼容性问题
2.CSSHack方式
a.CSS内部Hack
对选择器内部的属性或者值，增加前缀或后缀的方式
b.选择器Hack
为选择器增加前缀，去匹配不同的浏览器
c.HTML头部引用Hack（条件注释）

gt IE6 选择大于IE6版本以上的浏览器
lt IE6 选择小于IE6版本以下的浏览器

条件注释语句

只在IE下生效

只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->

只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->

只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->

非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->

如何解决浏览器兼容性问题:
1.htlm/css/js 代码全部都是标准模式
html5
html4.01 xhtml1.0

2.针对不支持的属性，需要通过浏览器的前缀来解决
-webkit- : Chrome Safari
-moz- : Firefox
-o- : Opera

3.针对微软IE的低版本浏览器，可以通过CSSHack的方式来解决
a.CSS内部的Hack
IE 8.9.10 : \0后缀
IE 9.10 : \9\0后缀
IE 7 : * , + , #
IE6 : - , _
b.选择器Hack
*前缀
*+前缀
@media screen{}
c.头部引用Hack

4.主流浏览器的主流版本
通过相应的CSS框架解决比如Bootstrap

前端的兼容性一直是让人脑壳变大的一个怪东西，但是又不得不去面对它，只能是一点一点，碰到什么问题然后解决，再记在自己的前端经验的小本本上，前端的路很漫长，加油吧

浅谈浏览器的兼容性

CSSHack 解决浏览器兼容器问题

猜你喜欢