icybamboo
- 浏览: 39856 次
- 性别:
- 来自: 杭州
-
最新评论
我们知道，IE6可能过不了多久就会消失了，但是我们还能继续支持这个浏览器并且避免hack和有约束的CSS吗？这里是10个使用有效的HTML和CSS代码来修正IE6主要问题的方法。
1. 使用DOCTYPE
你应该在一直每个HTML文件的头部都使用DOCTYPE，并且我们推荐使用strict 版本，比如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ strict.dtd">
或者，对于XHTML使用:
<!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;”
为浮动元素的最后一个条目使用一个条件注释，比如：
<!--[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; #element[id] { height: auto; }
8. 避免百分比单位
百分比会把IE搞糊涂的。除非你可以确切的控制每一个父元素的大小，才可能做到最佳预防。你可以通过!important在其他浏览器中继续使用百分比，比如：
body { margin: 2% 0 !important; margin: 20px 0; }
9. 尽早测试并不断测试
不要等到你的网站或应用完成了才测试IE6;这样的话问题可能更糟糕，而且会花更多时间来修正。如果你的网站能够在Firefox和IE6中正常运行，那么一般在其它浏览器就不会有问题。
10. 重构你的代码
经常发生的事情是，修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。这可能意味着你要放弃完美的代码，但是会出现较少的长期问题而且将来你会很清楚如果处理这些可能出现的问题。
神飞感言，虽然IE8并没有从根本上改变IE，但是它对CSS标准的支持的确有非常大的改观。但是即便如此，我们依然不能寄希望与IE8的普及，这是一件很不靠谱的事情，顽固的IE6用户未必会接受IE8。所以我们最近一年半载还是不能无视IE6。
1. 使用DOCTYPE
你应该在一直每个HTML文件的头部都使用DOCTYPE，并且我们推荐使用strict 版本，比如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ strict.dtd">
或者，对于XHTML使用:
<!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;”
为浮动元素的最后一个条目使用一个条件注释，比如：
<!--[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; #element[id] { height: auto; }
8. 避免百分比单位
百分比会把IE搞糊涂的。除非你可以确切的控制每一个父元素的大小，才可能做到最佳预防。你可以通过!important在其他浏览器中继续使用百分比，比如：
body { margin: 2% 0 !important; margin: 20px 0; }
9. 尽早测试并不断测试
不要等到你的网站或应用完成了才测试IE6;这样的话问题可能更糟糕，而且会花更多时间来修正。如果你的网站能够在Firefox和IE6中正常运行，那么一般在其它浏览器就不会有问题。
10. 重构你的代码
经常发生的事情是，修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。这可能意味着你要放弃完美的代码，但是会出现较少的长期问题而且将来你会很清楚如果处理这些可能出现的问题。
神飞感言，虽然IE8并没有从根本上改变IE，但是它对CSS标准的支持的确有非常大的改观。但是即便如此，我们依然不能寄希望与IE8的普及，这是一件很不靠谱的事情，顽固的IE6用户未必会接受IE8。所以我们最近一年半载还是不能无视IE6。
分享到：
发表评论
-
关于XHTML的H1标记的位置（转）
2010-05-21 00:02 699最近对H1的讨论很 ... -
h1~h6的使用原则（转）
2010-05-20 18:56 824在遵循网页标准制作网页的时候，为了使得设计更具有语义化，我们经 ... -
link和@import（转）
2010-05-19 13:47 782在XHTML加载CSS的几种方式，其中外部引用CSS分为两 ... -
JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度（转）
2010-05-11 12:57 3778网页可见区域宽：document.body.clientWid ... -
XMLHTTP.readyState的五种状态（转）
2010-04-18 10:01 2065对于很多 Web 开发人员来说，只需要生成简单的请求并接收简单 ... -
xmlhttp:open方法中的POST、GET参数的区别（转）
2010-04-18 08:43 27081 问题描述：xmlhttp:open ... -
Ajax问题:AJAX中文参数值乱码（转）
2010-04-18 08:41 911本文来解决本站发布的第一个解决的问题，那就是Ajax中文参数值 ... -
淘宝栅栏布局模块化命名浅析(转)
2010-03-30 08:56 800折腾，之前的数据几乎全部丢失掉了，学习、记笔记需要动力和时间的 ... -
Flash基本概念和原理
2010-03-22 16:57 1919一、时间轴线（Timeline） 时间轴线是动画和视频类软件 ... -
IE6中line-height属性失效问题（转）
2010-02-27 16:20 1087关于IE6下line-height属性失效问题 ... -
css奇怪的现象，ff不支持伪类的情况
2010-02-25 09:34 0.hcBox:first-child,*html .hcFCh ... -
认识浏览器的渲染引擎（转）
2010-02-23 14:57 1592浏览器的渲染引擎负责取得网页的内容（html、xml、图像等） ... -
ECMAScript对象基础（转）
2010-02-05 11:11 615内容摘要：通过引入_initialized 属性，当第一次构造 ... -
正则表达式 转义字符（转）
2010-02-01 20:22 8983字符匹配语法： \d ... -
xhtml元素的分类
2010-02-01 12:35 715块元素：html,body,div,h1,h2,h3,h4,h ... -
css-私有css Hack（转）
2010-01-28 14:49 647只针对ie6，ie7和firefox的csshack 注意都要 ... -
jQuery-控制表格列显示的插件
2010-01-28 14:28 852最近做项目，表格列比较多，常用的分辨率下总是有气人的横向滚 ...
相关推荐
Internet Explorer（IE）作为曾经的主流浏览器，尤其在IE9和IE10版本上，开发者常常会遇到CSS（层叠样式表）加载不上的问题。这主要是由于IE9和IE10对某些CSS特性支持不足以及对文件加载机制的差异导致的。本篇将...
然而，在IE6中，这两个方法都存在问题。 1. `opacity`属性：IE6并不支持CSS3的`opacity`属性。为了实现透明效果，开发者通常会依赖JavaScript库，如jQuery，或者使用专为IE6设计的滤镜（filter）属性。例如，可以...
标题和描述均提到了“DIV+CSS相对IE6、IE7和IE8的兼容问题”，这揭示了在Web开发中，尤其是针对老旧浏览器如IE6、IE7和IE8进行CSS布局时，开发者可能遇到的一系列挑战。这些浏览器在解析CSS规则时存在独特的行为，...
这份“IE6, IE7, IE8 CSS 兼容速查表”就是为了解决这一问题而编写的，它提供了关于这些浏览器中CSS特性的详尽对比和解决方案。 1. **CSS盒模型差异**：IE6、7采用了独特的盒模型，其中`width`属性包含了边框和内...
例如，当希望在IE7和Firefox中显示宽度为600px，在IE6中显示为590px时，可以使用以下CSS代码： ```css .example { width: 600px; *width: 600px; /* Firefox识别 *，IE7识别 */ _width: 590px; /* IE6识别 _ */...
- 例如，若希望在Firefox中使用某宽度值，在IE7及以上版本中使用另一个宽度值，在IE6中使用第三个宽度值，则可以这样写： ```css #wrapper { width: 100px!important; /* IE7+ 和 Firefox */ width: 80px; /* ...
`通常能够轻松实现这一目标，但在IE6中，这种方法却会遇到问题。具体表现为元素并未准确居中，而是出现了偏移或错误定位。 **问题表现**： - IE6对`margin: auto;`的支持并不完善，导致元素未能正确居中。 **解决...
"webpack-ie9-bug"这个存储库正是为了演示和解决在IE9中遇到的特定错误而创建的。 在JavaScript的世界里，IE9是个特殊的浏览器，因为它不支持许多现代JavaScript特性，如ES6的箭头函数、Promise、模板字符串等。...
知识点解析：IE6 中存在一个著名的双倍边距 BUG，就是当一个元素浮动时，IE6 会将边距值翻倍，导致布局混乱。解决这个问题的方法是添加 display:inline 样式，这样可以避免 IE6 的双倍边距 BUG。 3. FF 下文本无法...
但凡是前端工程师，都知道IE6，IE7，IE8不支持、或者不完全支持CSS3的属性。 CSS3 有很多很强大、绚丽的效果，比如，圆角，阴影，渐变透明，渐变背景，等等。 因为IE6时代，没有什么标准，而因为各种原因，IE6用户...
然而，如同许多前端组件一样，它可能存在一些与特定浏览器兼容性相关的先天bug，特别是对于老版本的Internet Explorer（如IE6、IE7等）。在这些老版本的IE浏览器中，由于其对CSS3、JavaScript和DOM的支持有限，可能...
在IE6中，如果一个浮动元素设置了margin属性，可能会导致实际的外边距比预期的要宽一倍。为了解决这个问题，可以将浮动元素的`display`属性设置为`inline`。 2. **最小高度的处理**： IE6不支持`min-height`属性...
2. **margin加倍问题**：在IE6中，设置为浮动的div的margin会被加倍。解决方法是添加`display: inline;`，这样IE6将不会错误地加倍margin。 3. **浮动元素的双倍距离**：在IE中，浮动元素间的margin可能会导致两倍...
**下划线前缀（_）**：此方法使CSS属性仅在IE6中生效。例如，`_line-height: 23px;`仅会被IE6识别并应用。这是利用了IE6的一个特性，即它会忽略属性名称前带有下划线的CSS声明。 ### 三、针对IE7的Hack **星号前缀...
ie7.js是一个由Dean Edwards开发的JavaScript库，它主要目的是让IE6和IE7支持一些CSS2.1及部分CSS3选择器，如类选择器（.class）、伪类（:hover、:focus等）和属性选择器（[attr=value]）。ie7.js通过动态创建DOM...
具体表现为，在IE6中，当一个元素设置了`float`属性后，其后的相邻非`float`元素也会受到浮动的影响，表现为似乎被“拉入”浮动区域。而在其他现代浏览器如Chrome和Firefox中，非`float`元素不会受到影响，它们会...
在网页设计中，兼容性问题始终是一大挑战，特别是针对早期版本的 Internet Explorer（IE），如 IE6。IE6 在解析 HTML 和 CSS 方面与其他浏览器存在显著差异，导致设计的页面在不同浏览器上的表现不一致。为了解决这...
下面，我们将深入探讨IE6中的常见问题以及解决策略。 1. **PNG透明度问题**：IE6不支持PNG8和PNG24格式的阿尔法透明度，导致半透明图片显示不正常。解决方案可以使用CSS滤镜，如`filter: progid:DXImageTransform....