浏览器兼容性测试学习01

• 浏览器兼容性简介
• • 一个网页在不同的浏览器下，显示的效果可能不一致，这就是所谓的“不兼容”。
  • 兼容性测试，主要调试IE8、IE6、IE7、Firefox。
  • http://tongji.baidu.com/data/os
• IE浏览器的调试工具：IETESTer
• 兼容性讲解
• • 全局CSS设置
  • • 清除所有标记的内外边距

    • • <span style="font-size:14px;">body、ul、li、img、input { margin: 0; padding: 0}</span>

        
        
    • 去除项目符号或者编号前的符号

    • • <span style="font-size:14px;">ul,ol,li { list-style: none }</span>

    • 全局链接效果

    • • a:link, a:visited {color: #444; text-decoration: none;}

        <span style="font-size:14px;">a:hover { color: red;}</span>

    • 网页中所有的文字大小颜色

    • • body { font-size: 12px; font-family: 宋体,arial; color: #cccccc;}

    • 取消图片边框

    • • img { border:  0 }

        
        
    • 全局的类样式

    • .floatL { float: left;}.floatR { float: right;}.clear { clear: both;}.blank10 { height: 10px; clear: both; }.red { color: red;}.blue { color: blue;}
  • 常用的兼容性调试技巧
  • • 实现所有浏览器主页居中
    • • Firefox下主页居中代码：

        .box { margin: 0 auto;}

        
        
      • IE5.5下的主页居中代码：

         .box { text-align: center;}

        
        
    • 将以上代码合在一起书写

    • • .body { text-align: center;   /*IE5.5以下主页居中*/}

        .box { text-align: left;  /*恢复Firefox浏览器下的文字不居中*/}

      • 上面代码可以实现所有浏览器都居中
  • 单行文本上下居中

  • • H1 { height: 30px; line-height: 30px;}

  • 在IE6下，左右margin会加倍，应该是IE6下的一个BUG。
  • • 解决的方案：使用display: inline;  /*将块元素转变成行内元素*/
    • 提示：排版时，能使用padding解决的，坚决不要用margin。如果实在需要用的话，就是用单边margin属性（margin-left等）。
    • 
      
• CSS HACK
• • 针对不同浏览器，书写不同的CSS代码的过程，称为“CSS HACK”。
  • 也就是说，写一个CSS代码，让IE6识别，其他浏览器不识别。
  • 真的不同浏览器，有几个符号：
  • • 这些符号是在CSS属性前面加的，用于分辨不同的浏览器版本。
    • ”*“IE6和IE7都识别。如：

      .box { *background-color: red;}

      
      
    • ”_“只有IE6识别。如：

      .box {  _background-color: green;}

      
      
    • CSSHACK的编写顺序：Firefox—IE7—IE6
    • 使用CSSHACK来处理IE6下，左右margin加倍的问题。
    •  例如：

• • •  .news {      margin: 50px  /*所有浏览器都识别*/      _margin: 50px 50px 50px 25px;  /*IE6识别*/}

      
      注意：CSSHACK不是W3C的标准，因此，我们尽量少用。如果调试兼容性，实在不行的情况下，可以偶尔用一下，切忌大篇幅使用。