将一个元素设置为”position:relative”可以解决很多问题，特别是你曾经遇到隐藏的或对齐诡异的盒子。

2.将浮动元素设置为display:inline

具有margin属性的浮动元素可能引起的IE6双倍margin问题，比如，你为一个元素指定margin-left为5px，但是IE6中实际上却表现为10px。”display:inline”将解决这个问题，当然，方法也不是只有这一个。

3. 将一个元素设置为hasLayout

很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。 用来确定相对于其他元素，内容是如何布局和定位的。如果你需要设置一个inline元素(比如一个链接)为block元素，或者是应用透明效果。

最简单的设置hasLayout的方法是为CSS设置一个高度或宽度（zoom也可以用，但是zoom并不是CSS标准的一部分）。我们推荐设置实 际尺寸，但是问题是这是不现实的，你可能需要使用”height:1%”。如果父元素并没有设置高度，该元素的实际高度并不受影响，而且这个时候 hasLayout已经被启用。

4. 修正重复文字bug

复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法，有些是完美的，但是做一些反复试验也是必须的：

• 确保所有的元素使用”display:inline;”
• 在最后一个元素上使用一个”margin-right:-3px;”
• 为浮动元素的最后一个条目使用一个条件注释，比如：

  1	<!--[if !IE]>Put your commentary in here...<![endif]-->

• 在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)

5. 使用!important 或高级选择器来区分IE6

不使用传统Hack或在额外文件中的条件CSS的方法，写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义：

1
2
3
4
5

#element {
 min-height: 20em;
 height: auto !important; /* 所有浏览器都理解这段代码 */
 height: 20em; /* IE6 错误的使用这个值 /*
}

IE6 不理解min-height并错误的用20em覆盖”auto”高度，但是，如果内容需要更多的空间的话，它会自动增加高度。

另外一个可选的方法是使用高级选择器，比如e.g.

1
2
3
4
5
6

#element {
 min-height: 20em;
height: auto !important; 
height: 20em;
overflow: visible;
}

6. 避免百分比单位

百分比会把IE搞糊涂的。除非你可以确切的控制每一个父元素的大小，才可能做到最佳预防。你可以通过!important在其他浏览器中继续使用百分比，比如：

1
2
3
4

body {
 margin: 2% 0 !important;
 margin: 20px 0; /* IE6 only */
}

7. 尽早测试并不断测试

不要等到你的网站或应用完成了才测试IE6;这样的话问题可能更糟糕，而且会花更多时间来修正。如果你的网站能够在Firefox和IE6中正常运行，那么一般在其它浏览器就不会有问题。

8. 重构你的代码

经常发生的事情是，修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。这可能意味着你要放弃完美的代码，但是会出现较少的长期问题而且将来你会很清楚如果处理这些可能出现的问题。

虽然IE8并没有从根本上改变IE，但是它对CSS标准的支持的确有非常大的改观。但是即便如此，我们依然不能寄希望与IE8的普及，这是一件很不靠谱的事情，顽固的IE6用户未必会接受IE8。所以我们最近一年半载还是不能无视IE6。

由 愚人码头 撰写 　http://www.css88.com/archives/1584

1. 随着字数的增多，两边的间距也会越来越大。
2. 在 WIN 的XP 风格下，当字数很多时，两边还会出现严重的锯齿。

到底是什么原因呢？

蓝色理想 原 WEB标准化专栏 的斑竹 zbm2001z 给出了一个答案：

1、IE 在按钮的 value 值每增加 4 个字节（汉字为 2 个）时，就会在按钮的两边产生总共一个字节的内边距宽度。
2、IE 的按钮（XP 风格）默认样式是一个固定尺寸的圆角矩形图片作背景，所以一旦按钮变宽变高后，这个固定尺寸的圆角矩形图片的边缘自然就会出现“拉毛”的现象了。

对于第二个问题我们暂时没办法去解决，除非 WIN 系统自己修复 BUG ，但对于第一个问题 ，我们还是可以修复的。

IE 下给按钮元素设置 overflow 属性的 visible 值（注 ：padding 值仅在设置了overflow:visible 属性后才有效），这个属性其实在上次写的《background-clip 与 background-origin 的一则运用》一文中已经使用。不过在今天阅读了《The stretched buttons problem in IE》后，发现原来还有一个小 BUG —— 如果将按钮置于表格单元格中，虽然按钮显示正确了，但是原先预留的宽度大小却没有改变，仍然占据着空间，需要在 IE6 中设置按钮的宽度（width）为 0（IE7同样也存在此 BUG，但暂时没有寻找到好的方式解决）。

最终的修复代码如下：

[code]input.button {
padding: 0 .25em;
width: auto;
_width: 0;
overflow:visible !ie;
}[/code]

Example Source Code [www.52css.com]

　　开始CSS编码

Example Source Code [www.52css.com]
* {
padding:0;
margin:0;
list-style:none;
}
ul {
width:390px;
margin:20px auto;
padding:10px 0 0 10px;
border:1px solid #ccc;
overflow:hidden;}
li {
float:left;
width:120px;
height:150px;
margin:0 10px 10px 0;
overflow:hidden;
}
　　我们在IE6、IE7和FF中浏览页面效果。发现在IE7中，ul底部的间隔消失了，也就是li的下外边距定义没有起到作用。如下图如示。

　　这是一个IE7的bug，我们通过CSS HACK来修复它，应用“*+html”作为选择器，针对IE7，设置UL的下内边距。代码如下。

Example Source Code [www.52css.com]
*+html ul {
padding-bottom:10px;
}
　　经过设置后，发现在IE6、IE7和FF中浏览均没有再出现问题。
　　本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
　　然后我们的列表项li是不固定的，我们去掉一个列表项li再浏览页面。发现在IE6下，ul底部的间隔又一次消失了，也就是li的下外边距定义没有起到作用。如下图如示。

　　我们不得不进行修复，针对IE6进行CSS HACK编码。应用“*html”作为选择器，针对IE6，设置UL的下内边距。代码如下。

Example Source Code [www.52css.com]
*html ul {
padding-bottom:10px;
}
　　再次运行后，发现在IE6、IE7和FF中浏览均没有再出现问题。
　　这也太不可思议了。怎么会频繁的出现如此多的问题。我们不得不考虑新的出路了。其实我们只要换一个角度去思考，这两个bug均可以成功的避免。
　　本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
　　也就是，我们设置ul的左侧和下则外边距，设置li的上侧和右侧外边距来实现间隔。如下图所示。
　　这样设置以后，无论在IE6、IE7和FF中，运行均没有问题。
　　有些时候，经过思考与变通，可以成功的避免很多问题，在CSS网页布局中，需要灵活的运用各种技巧与经验，往往有事半功倍的效果。有何经验与技巧欢迎您在52CSS.com留言或评论，与大家一起分享。

写在最后的自己的话：其实网上很多很多的文章都是转来转去，改来改去，经过自己测试的又有几个人？我发现这个BUG只有IE7有，IE6下貌似没有，还希望大家一起测试，发现问题，解决问题，不断进步！

在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。
在CSS2中此伪类可以应用于任何对象。
但目前IE5.5、IE6仅支持CSS1中的:hover，不过新出的IE7是支持CSS2中的:hover。
当我们用伪类:hover做某些特殊效果时，依据CSS2很好完成，但为了现在占据主流浏览器的IE6，我们又不得不做很多工作，比如给添加a元素等来模拟完成最终的效果。
或许这样讲太空洞，请看下面一个常见的触发显示的例子（仅选择IE6为例讲解）。

我们先用CSS2的写法来实现：

XHTML部分

• 鼠标移过来触发我吧！哈哈，终于被你发现了！

代码：

* {margin:0; padding:0;}
ul {list-style:none;margin:100px;}
li {height:100px; width:100px; background:#000; font-size:12px; color:#fff; position:relative;}
li a {display:none;}
li:hover a{display:block; text-decoration:none;width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff;}

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• 鼠标移过来触发我吧！哈哈，终于被你发现了！

大家可以测试发现在FF等对CSS2支持很好的浏览器中，可以显示我们所要达到的效果，但在IE6中却无法实现。

下面让我们换一种思维，所用CSS1的写法来看看，这个时候由于无法支持li元素:hover的使用，我们只好把所有文字包含到a中，对a使用:hover，并且将要显示隐藏的部分放到span元素中，首先我们对XHTML进行部分调整，调整如下：

XHTML部分：

• 鼠标移过来触发我吧！哈哈，终于被你发现

CSS中我们将a的设置成块级元素，并使a的大小和宽度和li的相同，并设置a为相对位置，用a来模拟上例中的li；而用span来模拟上例中的a，设置span在默认情况下隐藏（display:none;），当a被触发时（:hover），则span显示（display:block;）

CSS部分：

* {margin:0; padding:0;}
ul {list-style:none;margin:100px;}
li {height:100px; width:100px; background:#000; font-size:12px; }
li a {display:block; height:100px; width:100px; position:relative; color:#fff; text-decoration:none;}
li span {display:none; }
li a:hover span {display:block; width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff; }

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• 鼠标移过来触发我吧！哈哈，终于被你发现

可我们发现上例中的效果，在IE6中依然无法显示，难道我们的代码写错了，可检查来检查去一点错误也没有（不信你找个高高手问问，他们依然会回答你，这代码完全正确），难道是标准中的说明是错的？还是IE6浏览器连CSS1也不支持？很多疑问从四面八方跑来了……

那到底是什么问题呢？

不是标准说明的错，也不是IE浏览器不支持CSS1，而是IE浏览器自身解析的问题，是IE5.5和IE6中伪类:hover的BUG。

那又该如何解决这个问题呢？

这个BUG可以通过在链接的属性中增加某些特殊的CSS属性声明来消除。

下面我们对上面的第二个例子进行实验，究竟哪些属性可以帮我们来消除这些BUG。

对CSS代码我们增加：
li a:hover {}

对其属性我们仅设定width:100px;发现在IE6中依旧没有变化，我们尝试着更改width的value，比如使其width:99px，奇怪的事情发生了，在IE6中，隐藏的部分在触发的时候显示出来了。我们再对li a:hover的属性仅设定color来测试（初始值为#fff），更改color值，发现在IE6下却也不能触发显示，奇怪，奇怪，真奇怪……是不是依旧是一头雾水……没关系，继续往下实验，或许归类了我们就能发现规律了！

我们再用其他属性进行设置：width，positon，background，text-decoration，font-size，font-weight，font-family，border，float，display，font-style，margin，padding，text-align，overflow，text-transform，text-indent，z-index，vertical-align。

我们发现除了text-decoration，color，z-index不能触发显示（对于不能触发显示的部分，可以还有某些遗漏的属性，欢迎朋友补充）外，其他属性均可以做为消除伪类:hover BUG的特定属性。

说明：
1、对于dispaly不可以用本例来测试，可另外写个更简单的例子（去除ul/li，a和span中的position）。在实际应用中怿飞不建议改变display值来做为特定属性消除此BUG，而且在某些例子中此属性不一定能消除BUG。
2、对于做为特定属性的border和background中的颜色我们还可用全写和简写来改变，如#fff和#ffffff在消除BUG中解析为2个不同的值。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• 鼠标移过来触发我吧！哈哈，终于被你发现

此帖源自：怿飞

1. margin 设置了0px (一般的dom都默认是0)
2. overflow设置了 hidden, auto, scroll 其中一个
3. flash是设置了透明

[html]

[/html]
解决方案给设置了overflow的dom设置非0像素的margin,例如 margin:0.1px

段落A

段落B

[/html]

下面是贴出解决办法
[html]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

段落A

段落B

[/html]