甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

技术分享在IE6下调试CSS方法揭秘

你对IE6调试CSS的方法是否了解，这里和大家分享一下，主要介绍原作者的针对IE6调试CSS的一些经验。

在IE6下调试CSS方法

由于IE6糟糕的盒模型，你必须要万分小心。如果你需要将一元素设置了宽度，注意避免再将其上设定margin、padding（左边或者右边）。我会在其上再包裹一层元素。

防患于未然

坦白的讲，我每天都会话很多时间用于调试IE6的CSS问题上。下面是一些小Tips可以确保IE6最大限度的返回你期望的效果。不幸的是，并不是每个人都知道它们（译注：作者有些“危言耸听”）。

重置默认样式

重置默认样式可以最大限度的避免浏览器差异，最简单的样式重置通常可以这样写

 
 
 
    
  
  
  
  1. *{  
    2. 
  
  
  
  2. margin:0;  
    3. 
  
  
  
  3. padding:0;  
    4. 
  
  
  
  4. }  
    5.

如果你觉得这样“太过于简单”，可以参考YUIReset和EricMeyer'sReset。

不要在同一元素上同时声明margin/padding的宽度

由于IE6糟糕的盒模型，你必须要万分小心。如果你需要将一元素设置了宽度，注意避免再将其上设定margin、padding（左边或者右边）。我会在其上再包裹一层元素，比如

、

    、、
    这样的标签。

    在大多数情况下，设计师会统一同一种元素的样式，比如段落的内间距（padding）统一为8px到20px（通常为10px）
     

     
 
 
      
  
  
  
    1. p{  
      2. 
  
  
  
    2. padding:010px;  
      3. 
  
  
  
    3. }  
      4. 
  
  
  
    4.  
      5.

    这是个非常好的定义。

    ◆另外：我一直使用像素（pixels）作为margin和padding的单位，因为如果使用em，那么可能在使用不同的字体造成不同的宽度差异。

    校验XHTML、HTML

    我已经好几次遇到这样的问题，在Firefox和Safari显示完好的页面，却在IE6下显得惨不忍睹。如果Explorer7也出现了这样的问题，那可能是遗失了“<”或者“>”之故。为了些可预见性的问题，其他浏览器都会注意这个问题，唯独Explorer。我经常使用Firefox的HTMLvalidator插件验证页面代码。#p#

    保持清除浮动

    总会有页面要将某个元素浮动起来，如果是定宽的那么还好办。如果是不定宽度的，那么要清除下浮动--毕竟其他元素不一定都是浮动的。总之，时刻记得清除浮动是个好的习惯（译注：也可以参看我以前的文章：《CSS别忘记清除浮动》）。

    调试的技巧

    虽然有多年针对IE6的CSS调试经验，一些常见的问题我知道如何去解决，但真的碰到很头痛的问题时，那时我通常会这样解决：

    ◆打开电脑，载入IE6
    ◆确保安装了IEAccessibility工具条
    ◆点击工具条上的“编辑CSS”
    ◆然后我开始“变魔术”
    ◆寻找错误

    设定背景色

    我经常会在指定的大块元素上设定个背景色 

     
 
 
      
  
  
  
    1. #content{  
      2. 
  
  
  
    2. background-color:red;  
      3. 
  
  
  
    3. }  
      4. 
  
  
  
    4.  
      5. 
  
  
  
    5. #sidebar{  
      6. 
  
  
  
    6. background-color:blue;  
      7. 
  
  
  
    7. }  
      8.

    这能让我知道是哪块元素出了问题（译注：我喜欢用“red”高亮，因为好打而且显眼）。

    隐藏元素

    然后开始逐级的隐藏该块元素中的内容，首先是最大的块

     
 
 
      
  
  
  
    1. #sidebar{  
      2. 
  
  
  
    2. display:none;  
      3. 
  
  
  
    3. }  
      4. 
  
  
  
    4.  
      5.

    如果问题消失了，那么再逐级在块中寻找出问题的元素，比如

     
 
 
      
  
  
  
    1. #sidebar.sub-item{  
      2. 
  
  
  
    2. display:none;  
      3. 
  
  
  
    3. }  
      4. 
  
  
  
    4.  
      5.

    或者

     
 
 
      
  
  
  
    1. #sidebar.sub-item.sub-sub-item{  
      2. 
  
  
  
    2. display:none;  
      3. 
  
  
  
    3. }  
      4. 
  
  
  
    4.  
      5.

    使用这一方法，通常就能精确的定位哪个元素造成的问题（按照经验通常是

    或者是

    ）。#p#

    寻找解决方案

    IE6是头“烈马”，它会按照自己的规则去渲染CSS。当找到对应的元素后，下面有些经验式的解决方案可以参考一下：

     
 
 
      
  
  
  
    1. #sidebar.sub-item.sub-subitem{  
      2. 
  
  
  
    2. /*trysettingthisifit’snotalreadyset-itsometimesworkswonders*/  
      3. 
  
  
  
    3. position:relative;  
      4. 
  
  
  
    4.  
      5. 
  
  
  
    5. /*display:inlineoftenfixesthedoublemarginfloatbugand*/  
      6. 
  
  
  
    6. display:inline;  
      7. 
  
  
  
    7.  
      8. 
  
  
  
    8. /*Sometimesthisjustfixesproblems-noideawhy*/  
      9. 
  
  
  
    9. display:inline-block;  
      10. 
  
  
  
    10.  
      11. 
  
  
  
    11. /*margincanbeakillersotakeitoffcompletelyseeiftheproblemgoesaway*/  
      12. 
  
  
  
    12. margin:0;  
      13. 
  
  
  
    13.  
      14. 
  
  
  
    14. /*sameasmargin*/  
      15. 
  
  
  
    15. padding:0;  
      16. 
  
  
  
    16.  
      17. 
  
  
  
    17. /*SometimesIE6hatesbackgroundcoloursnotbeingdeclared*/  
      18. 
  
  
  
    18. background-color:transparent;  
      19. 
  
  
  
    19.  
      20. 
  
  
  
    20. /*cansometimesstopcolumnstoowidefrombreakingalayout*/  
      21. 
  
  
  
    21. overflow:hidden;  
      22. 
  
  
  
    22.  
      23. 
  
  
  
    23. /*SometimesforceshasLayoutandfixesthings*/  
      24. 
  
  
  
    24. zoom:1;  
      25. 
  
  
  
    25. }  
      26.

    我经常会碰到改变它的margin和display就能解决问题。然后我会使用Google搜索网上是否有相应的Bug记录。

    解决问题

    当我找到解决该问题的办法以后，通常我会将其放到名为ie6.css文件中，然后只让IE6载入该CSS。当然，要确定该样式会覆盖原先定义的样式。

    译注：当然也可以使用CSSHacks，但不推荐这样做，原因之一是要“保持CSS简单”。

    本文出自：http://www.gracecode.com/Archive/Display/2523
     

    【编辑推荐】

    1. IE6下使用CSS定义DIV高度行之有效的办法
    2. 探究IE8与IE7具体功能中窗口功能按钮的变化
    3. IE6 IE7 IE8三个版本的CSS兼容速查手册
    4. DIV+CSS兼容IE6、IE7、Firefox方法探究
    5. 技术前沿 一段JS代码轻松解决IE6-IE8的兼容性问题

    网站标题：技术分享在IE6下调试CSS方法揭秘
    URL地址：https://chengdu.cdxwcx.cn/article/coihoid.html

    其他资讯