IE6 下的HTML5兼容问题
下面列举IE6中10个不得不注意的问题：
1. 使用 DOCTYPE
你需要在HTML页面的最顶部加上DOCTYPE类型，当然， strict版是值得推荐的，例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
或者, XHTML页面的!DOCTYPE：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
你最不想看到的是，IE6进入怪癖模式 – 其实已经够多怪癖了。
2. 设置position: relative
设置position:relative解决了不止一个问题，特别当需要设置对齐的时候。很明显，你需要明白的一点是，绝对定位是相对来说的。说不定，因为你没有设置，而不知道东西都飞到那去了。比如，你设计了每篇文章前都有一张图片，最后，你发现，只有一张图片在页面上，或许，是他们重叠了。
3. 给浮动元素设置 display:inline 值
这源于著名的IE6双倍外边距BUG，例如，你给一个DIV设计了浮动，并且，设置了margin-left:5px;，在IE6中很可能就是margin-left:10px了，这里，给浮动元素设置 display:inline；，即可解决问题。
4. 为元素设置 hasLayout
很多IE6（或IE7）的问题可以用设置hasLayout值的方法来解决。（如果你不知道hasLayout是什么，请看这里）
最简单的给元素设置hasLayout值的方法是给加上CSS 的height或width(当然，zoom也可以用，但这不是CSS的一部分)。设置一个具体的值是推荐的，但有时候并不一定知道高度多少，这里，你可能会用到height:1%。如果父元素没有设置高度，那么元素的物理高度并不会改变，但是，已经具备hasLayout属性。
5. 解决字符重复出现的问题
复杂的布局可能导致一些浮动元素里面的文字，出现在清理浮动位置的下面。这是一个奇怪的问题，下面这此可以帮你解决：
•确保浮动元素设置了 display:inline;
•在浮动元素中使用 margin-right:-3px;
•在浮动元素的最后一个元素后加上一个IE注释，例如： <!--[if !IE]>把你的注释放这里… <![endif]-->
•在最后的元素中加上一个DIV(这以设置width 为90% 或者其他相似的高度)
UPDATE: 最简单的方法是删除掉所有注释。（感谢恬玮儿的提示，我自己并没有遇到过，不过，google了一下，发现这个方法也可以解决，并且，这是值得推荐的一个方法。）
你可以到positioniseverything.net中查看更多关于这个的解释。
6.只在<a>标签中使用hover，IE6只支持<a>标签显示hover样式
当然，你还是可以通过JS来解决这个方法。但是， 这关于到可访问性的问题。建议不要把重要的内容设置在利用JS来实现的hover中。
7. 使用!important 或高级选择器来区分IE浏览器
比如min-height可以避免使用CSS来实现对IE的兼容。
#element {
min-height: 20em;
height: auto !important;
height: 20em; /* 让IE6显示这个高度 */
}
IE6 并不能正确地识别min-height，可以设置固定的高度，让IE6解析为20em。即使如此，它还是会因为内容的尺寸扩大而改变高度。而另一个方法是使用高级选择器：
#element {
min-height: 20em;
height: 20em;
}
/* 忽略 IE6 */
#element[id] {
height: auto;
}
8. 避免按比例确定的尺寸
比例会让IE6变得错乱，除非你给父元素添加一个确切的高度。不然，给其他的加上!important，例如：
body{
margin: 2% 0 !important;
margin: 20px 0; /* IE6 可读 */
}
9. 尽早测试，经常测试
别忘记尽早测试，经常测试， 除非你的程度已经完成。不然，你可能花更多的时间来解决IE6的问题。一般情况下，如果你的网站能在IE6和firefox下良好表现，估计其他浏览器就不会有什么大问题了。
10. 重构你的代码
很多情况下，解决一个问题，可能比重构你的代码要花更多的时间。
IE6 下的HTML5兼容问题的更多相关文章
- IE6下position:fixed;兼容
*html{ background-image:url(about:blank); background-attachment:fixed;}/*解决抖动问题*/ .backto-top{ width ...
- 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...
- HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
这篇文章主要介绍了HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法,需要的朋友可以参考下 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面 ...
- IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...
- ie6下兼容问题
最小高度问题:overflow:hidden 在ie6.7下 li本身不浮动 内容浮动 li产生3像素间隙 解决:vertical-align:top; 二.当ie6下最小高度问题和li间隙问题共存时 ...
- 在ie6下的png图片的兼容问题
png图片在ie6下是这样的: 正确样式: 这样解决: html代码: <body> <div class="gys"></div> </ ...
- IE6下面的hover不兼容
第一种解决方法: ie6中hover只是对a标签有作用 必须有href=“”,否则都不管用,如果不能写a标签,还想让ie6下有滑过效果,那只能写javascript或者jquery. 例如:ie6是不 ...
- IE6下div遮盖select的最优解决方案
a.本节精选html5/css频道里一款IE6下div遮盖select的最优解决方案 原理:利用iframe来遮挡select,再用div来遮挡iframe,就这么简单. 1)首先,建一个div层和i ...
- 疯狂抨击ie6下各种扭曲行为
从开始接触ie6就被它强大的力量给震住了,虽然它很可怕,但是我总归得想方设法把它给扼杀在摇篮外.以下是我在ie6下面碰到的一些扭曲行为,弱弱的把它给干掉!!! 1.浮动下margin翻倍问题(很典型, ...
随机推荐
- MySQL统计数据库表大小
use information_schema; SELECT TABLE_NAME, (DATA_LENGTH/1024/1024) as DataM , (INDEX_LENGTH/1024/102 ...
- css字体图标的制作和使用。
css字体图标的制作和使用. 在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图 ...
- Mininet实验 动态改变转发规则
介绍 拓扑如下: 在该环境下,假设H1 ping H4,初始的路由规则是S1-S2-S5,一秒后,路由转发规则变为S1-S3-S5,再过一秒,规则变为S1-S4-S5,然后再回到最初的转发规则S1-S ...
- WebStorm强大的调试JavaScript功能(转载)
一.JavaScript的调试 目前火狐和Chrome都具备调试JavaScript的功能,而且还是相当的强大.如果纯粹是用浏览器来进行js调试的话,我比较喜欢用火狐.火狐可以安装各种插件,真的是非常 ...
- elementUI中的el-form怎么使用正则进行验证
http://element.eleme.io/#/zh-CN/component/form里给出了一个form验证的例子,但是都是使用el-form带有的验证规则,怎么使用自己定义的规则进行验证呢? ...
- Delphi 检查文件是否存在
Delphi下检查文件是否存在,我们可以使用FileExists函数 其原形如下: Function FileExists(const FileName: string): Boolean; 示例: ...
- input只改变光标的颜色 不改变字的颜色
color: red; text-shadow: 0px 0px 0px #000; -webkit-text-fill-color: transparent;把这些放到input里文字通过阴影实现 ...
- Docker实战系列一：初识Docker for Windows
windows下安装Docker官网教程Install Docker for Windows Docker配置官网教程Get started with Docker for Windows
- line-height用法总结
Line-height是前端用语,经常被前端开发人员经常使用. line-height设置1.5和150%有什么区别?这是一个比较常见的前端面试题. 定义: line-height指的是文本行基线间的 ...
- 制作Windows10政府版的小白教程
制作Windows10政府版的小白教程 https://03k.org/make10entg.html 首先,宿主系统要比操作的系统新,因为低版本dism操作不了: 当然也可以单独下载ADK,提取最新 ...