我们知道，IE6可能过不了多久就会消失了，但是我们还能继续支持这个浏览器并且避免hack和有约束的CSS吗？这里是10个使用有效的HTML和CSS代码来修正IE6主要问题的方法。
1. 使用DOCTYPE
你应该在一直每个HTML文件的头部都使用DOCTYPE，并且我们推荐使用strict 版本，比如：
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
或者，对于XHTML使用:
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
你需要处理的最棘手的事情就是IE6进入quirks模式——它已经够诡异了。
2. 设置position: relative
将一个元素设置为”position:relative”可以解决很多问题，特别是你曾经遇到隐藏的或对齐诡异的盒子。显然，你需要非常小心点儿，因为绝对定位的子节点可能会因此重新定位。
3. 将浮动元素设置为display:inline
具有margin属性的浮动元素可能引起著名的IE6双倍margin问题，比如，你为一个元素指定margin-left为5px，但是IE6中实际上却表现为10px。”display:inline”将解决这个问题，尽管这不是必须的，你的CSS仍然是有效的。
4. 将一个元素设置为hasLayout
很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。 这是一个IE内部属性（IE隐藏的，更多关于haslayout的资料，可以参阅这里），用来确定相对于其他元素，内容是如何布局和定位的。如果你需要设置一个inline元素(比如一个链接)为block元素，或者是应用透明效果，设置hasLayout也可能是必须的。
最简单的设置hasLayout的方法是为CSS设置一个高度或宽度（zoom也可以用，但是zoom并不是CSS标准的一部分）。我们推荐设置实际尺寸，但是问题是这是不现实的，你可能需要使用”height:1%”。如果父元素并没有设置高度，该元素的实际高度并不受影响，而且这个时候hasLayout已经被启用。
5. 修正重复文字bug
复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法，有些是完美的，但是做一些反复试验也是必须的：
确保所有的元素使用”display:inline;”
在最后一个元素上使用一个”margin-right:-3px;”
为浮动元素的最后一个条目使用一个条件注释，比如：
1
<!--[if !IE]>Put your commentary in here...<![endif]-->
在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)
访问 positioniseverything.net 查看该问题的完整介绍。
6. 在可点击和悬停的元素上只使用<a>标签
IE6只认识对a标签的CSS hover效果。
你也可以在基于JavaScript的组件内使用他们来控制，以使他们保持键盘的可操作性。是有一些可替代的选择，但是<a>标签比其它方案更可靠。
7. 使用!important 或高级选择器来区分IE6
不使用传统Hack或在额外文件中的条件CSS的方法，写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义：
#element {
min-height: 20em;
height: auto !important; /* 所有浏览器都理解这段代码 */
height: 20em; /* IE6 错误的使用这个值 /*
}
IE6 不理解min-height并错误的用20em覆盖”auto”高度，但是，如果内容需要更多的空间的话，它会自动增加高度。
另外一个可选的方法是使用高级选择器，比如e.g.
#element {
min-height: 20em;
height: 20em;
}
/* IE6 无视下面的代码*/
#element[id] {
height: auto;
}
8. 避免百分比单位
百分比会把IE搞糊涂的。除非你可以确切的控制每一个父元素的大小，才可能做到最佳预防。你可以通过!important在其他浏览器中继续使用百分比，比如：
body {
margin: 2% 0 !important;
margin: 20px 0; /* IE6 only */
}
9. 尽早测试并不断测试
不要等到你的网站或应用完成了才测试IE6;这样的话问题可能更糟糕，而且会花更多时间来修正。如果你的网站能够在Firefox和IE6中正常运行，那么一般在其它浏览器就不会有问题。
10. 重构你的代码
经常发生的事情是，修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。这可能意味着你要放弃完美的代码，但是会出现较少的长期问题而且将来你会很清楚如果处理这些可能出现的问题。
神飞感言，虽然IE8并没有从根本上改变IE，但是它对CSS标准的支持的确有非常大的改观。但是即便如此，我们依然不能寄希望与IE8的普及，这是一件很不靠谱的事情，顽固的IE6用户未必会接受IE8。所以我们最近一年半载还是不能无视IE6。
如果你有其它比较好的可以解决IE6的bug的好方法或技巧，别忘了告诉前端观察哦～
原文：http://www.qianduan.net/?p=6190
译自：www.sitepoint.com
版权所有，转载请注明出处，谢谢。
分享到：
相关推荐
以下详述了在HTML和CSS中修正IE6主要问题的10个技巧。 1. 使用DOCTYPE声明 在每个HTML文档的头部包含DOCTYPE声明是确保浏览器按照标准模式解析页面的首要步骤。推荐使用严格型DOCTYPE声明，如HTML 4.01 Strict或...
### CSS常见Bug及其修正方法 #### 一、引言 在网页设计中，CSS（层叠样式表）作为控制HTML元素样式的强大工具，在实际应用过程中可能会遇到各种兼容性和布局问题。本文旨在介绍一些常见的CSS Bug及其解决方案，...
标题中的“IE6，7，8下多余字符bug”指的是在使用Internet Explorer 6、7、8这三款老版本浏览器时，可能会遇到的一个特定的编程问题。在这些早期版本的IE浏览器中，由于解析机制的限制或者存在某些未被修复的bug，...
面对IE浏览器中常见的CSS bug，理解其根源并掌握相应的修复技巧至关重要。以上列举了三种典型问题及其解决方案，包括居中布局、楼梯式效果以及float元素的两倍空白。通过这些方法，开发者能够在不牺牲兼容性的情况下...
描述中的“嘿呌，IE不再是个bug”暗示了这些技巧能帮助开发者有效地解决IE浏览器特有的CSS解析错误。 在Web开发中，CSS兼容性问题常常源于不同浏览器对CSS标准的实现不一致。以下是一些针对IE和Firefox的CSS兼容性...
1. **IE6的盒模型问题**：IE6在处理CSS盒模型时存在bug，导致元素的宽度计算出现问题。 2. **IE7的浮动元素错位**：在IE7中，当元素设置为`float`时，可能会出现与其他元素错位的现象。 3. **IE8的渲染模式选择**：...
标题和描述均提到了“DIV+CSS相对IE6、IE7和IE8的兼容问题”，这揭示了在Web开发中，尤其是针对老旧浏览器如IE6、IE7和IE8进行CSS布局时，开发者可能遇到的一系列挑战。这些浏览器在解析CSS规则时存在独特的行为，...
#### 技巧6：解决IE中的3像素间距bug 当左侧对象浮动，右侧对象通过`margin-left`定位时，右侧对象内的文本可能会与左侧对象之间出现3像素的间隙。可以通过为左侧对象添加负的`margin-right`来解决这个问题。 #### ...
### IE6、7、8兼容问题详解 #### 一、引言 随着Web技术的不断发展，浏览器兼容性问题一直是前端开发者关注的重点之一。特别是在早期Web2.0时代，不同的浏览器对于CSS的支持程度不同，导致了诸多兼容性问题。本文...
这个Bug主要出现在浮动元素与非浮动元素相邻的情况下，导致非浮动元素在IE6下向右偏移3像素，影响页面布局的精确性。 要理解这个Bug的原因，我们需要知道在IE6中，元素的“hasLayout”机制起着关键作用。hasLayout...
此Hack依赖于IE7的一个bug，即它不会正确解析带有星号前缀的CSS属性。 ### 四、针对IE8的Hack **尾部添加"\9"**：在属性值后添加`\9`，如`line-height: 26px\9;`，可让该声明仅在IE8中应用。这是利用了IE8对某些...
在网页开发过程中，IE6（Internet Explorer 6）作为一个老版本的浏览器，因其独特的解析方式和众多兼容性问题，给开发者带来了诸多困扰。本文详细汇总了IE6的一些常见bug及其解决方案，帮助开发者解决这些问题。 1....
其中，一个经常被讨论的奇数宽高BUG就是，在IE6中，当给定一个元素的宽度或高度为奇数值时，该元素在页面上可能会出现1像素的偏移，从而导致布局错乱。在本文中，我们将详细探讨IE6中的这个奇数宽高BUG，并提供解决...
例如，为了修正IE6/IE7中IE特有的bug，可以使用如下CSS属性值： ```css * html .class {property:expression('all-ie\9');} ``` 其中，property可以是需要覆盖的CSS属性，而“all-ie\9”是IE特有的条件值，它只...
标题中的“IE又一个让人吐血的BUG: 关于 table的position 和 select”指的是在Internet Explorer浏览器中，当处理表格（table）元素的定位（position）属性与下拉选择框（select）元素交互时出现的一个常见问题。...
在网页设计中，CSS（层叠样式表）的浏览器兼容性问题一直是开发者面临的挑战，特别是针对Internet Explorer（IE）和Firefox这两个主流浏览器。本文将详细阐述一些针对IE和Firefox的CSS兼容性处理技巧。 首先，要...
- `"*"`：适用于IE6和IE7，不适用于IE8及以上版本。 ```css .myClass * { padding: 10px; } ``` - `"_"`：仅适用于IE6。 ```css .myClass _{ padding: 5px; } ``` #### 常见问题及解决方案 1. **垂直居中...