CSS--浏览器兼容

浏览器兼容

       浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能给用户更好的使用体验。为什么会产生这种现象呢？是因为不同浏览器使用的内核及所支持的HTML等网页语言标准不同，以及用户客户端的环境不同造成的显示效果不能达到理想效果。最常见的问题就是网页元素位置混乱，错位。总的来说，浏览器兼容问题是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一。

       下面是总结的一些我自己使用过的解决浏览器兼容问题的css技巧。

        1.在ie6下，设置float属性的元素的margin会加倍。解决方法：在该元素上加上display:inline。

        2.vertical-align:middle不是解决垂直居中的通用公式。解决方法：将元素的height和line-height属性值设置成相同的，然后再插入文字，这样子，元素里的文字就垂直居中了。

       3.IE6不认识min-height。如果将属性设置成Min-height，他会当做height，同理，min-width也是如此。解决方法：{min-height:100px;_height:100px;overflow:visible;}overflow:visible这一句意思是当内容超过100px时就自动延长。

       4.IE6下图片会有空隙。解决方法：设置图片的属性display:inline

       5.无法定义1px左右高度很小的容器。这是因为ie浏览器有默认行高。解决方法：overflow:hidden。

     

       除了这些，CSS hack也是解决浏览器兼容问题的一个方法。css hack的目的是使你的css代码兼容不同的浏览器。当然我们也可以反过来利用css hack为不同版本的浏览器定制编写不同的css效果。css hack的三种方式：条件注释法，类内属性前缀法，选择器前缀法。下面列举一些常用的css hack方式。

     1.条件注释法：

      

     

     

     

     

    2.类内属性前缀法
       - _       只有IE6识别，7,8,9,10不识别(-color,_color)
       * + #     IE6,7识别，IE8,9,10不识别(*color,+color,#color)
       !important IE6不识别，IE7,8,9,10识别(color:blue!important)，FF也可以识别
       \0         IE6,7不识别，IE8,9,10识别(color:red\0)
       \9\0       IE6,7,8不识别，IE9,10识别(color:red\9\0)
        \9         IE都识别

   3.选择器前缀法
    *html *前缀只对IE6生效
    *+html *+前缀只对IE7生效
    @media screen\9{...}只对IE6/7生效
    @media \0screen {body { background: red; }}只对IE8有效
    @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
   @media screen\0 {body { background: green; }} 只对IE8/9/10有效
   @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等

    虽然css hack能够解决浏览器兼容的一些问题，可以迅速区分浏览器版本，但是当我们页面html结果和css样式书写都很符合web标准时，页面在良好支持web标准的浏览器下是不需要css hack的，正式由于对web标准支持不够良好的浏览器的存在才有css hack。如今现在大家都在朝web标准努力，那么从长远看来，css hack的使用可能会引起新的错误。