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

开发 前端
本文向大家描述一下在IE6下调试CSS方法,由于IE6糟糕的盒模型,你必须要小心。如果你需要将一元素设置了宽度,注意避免再将其上设定margin、padding。

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

在IE6下调试CSS方法

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

防患于未然

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

重置默认样式

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

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

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

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

由于IE6糟糕的盒模型,你必须要万分小心。如果你需要将一元素设置了宽度,注意避免再将其上设定margin、padding(左边或者右边)。我会在其上再包裹一层元素,比如<p>、<ul>、<table>、<hr>这样的标签。

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

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

这是个非常好的定义。

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

校验XHTML、HTML

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

保持清除浮动

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

调试的技巧

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

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

设定背景色

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

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

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

隐藏元素

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

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

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

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

或者

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

使用这一方法,通常就能精确的定位哪个元素造成的问题(按照经验通常是<div>或者是<p>)。#p#

寻找解决方案

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

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

我经常会碰到改变它的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的兼容性问题

 

 

责任编辑:佚名 来源: Gracecode.com
相关推荐

2010-08-18 15:41:38

IE6E7Firefox

2010-08-19 09:29:26

hoverIE6

2010-08-18 09:30:32

IE6兼容

2010-08-18 15:22:28

IE6IE7Firefox

2010-08-19 14:43:49

IE6IE7IE8

2010-09-02 16:18:33

CSSDIVIE6

2010-08-27 15:38:21

兼容IE6IE7

2010-08-18 10:37:16

IE6IE7IE8

2010-09-15 11:08:48

CSSIE6IE7

2010-08-18 15:57:14

IE6IE7IE8

2010-09-06 15:06:29

IE6IE7Firefox

2010-10-08 14:39:43

IE6DIVIE7

2010-08-18 13:54:35

IE6IE7Firefox兼容

2010-08-19 16:38:33

IE6IE7Firefox

2010-08-27 15:44:47

2009-08-13 10:12:07

IE的CSS Bug

2010-08-18 10:24:51

IE6IE7IE8

2010-08-18 13:45:07

IE6IE7FF

2009-08-14 09:20:40

抵制IE6

2010-08-19 15:40:34

DIVIE6
点赞
收藏

51CTO技术栈公众号