. 使用 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的表现，导致最近有很多奇怪的问题，因为布局比较复杂。后来，干脆重构代码。用了2天。我想，如果是想解决方法，或许2天都搞不定。

转自：http://hi.baidu.com/vcoso/blog/item/69e9954ed9f9b7c1d0c86ab2.html

转载于:https://www.cnblogs.com/johnwonder/archive/2010/05/07/1729460.html

IE6 Hack(转载)相关推荐

  1. CSS浏览器兼容性----Hack

    CSS Hack大致有3种表现形式,CSS类内部Hack.选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对IE浏览器. 类内部Hack:比如 IE6能识别下划线&qu ...

  2. ie6中兼容性问题总结

    针对firefox ie6 ie7 ie8的css样式中的line-height属性,以前我们大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7以上对! ...

  3. IE6中常见兼容性问题及浏览器显示难题

    1.双倍边距Bug 问题描述:假如有一个ul,里面有若干li,当li设置为左浮动时,此时设置li的margin-left为10px,会在最左侧呈现双倍情况.即20px 正常显示: IE6显示: 修正方 ...

  4. SegmentFault Hackathon 2018 火热登场，Let's hack!

    黑客马拉松(hackathon)最初诞生于 1999 年,由 SegmentFault 引进国内,自 2012 年 SegmentFault 首次举办黑客马拉松以来,已成为行业内广为知晓的黑客马拉松领 ...

  5. 什么是Hack技术？

    由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到 ...

  6. css hack 学习总结

    css hack CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是 同一厂商的浏览器的不同版本,如IE ...

  7. safair 的css hack

    在css里面使用[;attribute:value;] css参考如下: .header-share li{float: right; margin-left: 20px; [;width: 50px ...

  8. css hack方法,css hack怎么应用

    CSS hack的目的就是使你的CSS代码兼容不同的浏览器,那么你对css hack了解多少呢?下面就让学习啦小编来给你科普一下什么是css hack. css hack的原理 由于不同的浏览器对CS ...

  9. [css] 什么是hack？css的hack有哪些？

    [css] 什么是hack?css的hack有哪些? 一.总结 1.CSS hack:由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chr ...

最新文章

  1. 【听课笔记】2009 Google OpenSocial-CSDN开放平台交流会笔记
  2. python 机器学习管道_构建机器学习管道-第1部分
  3. 使用DbContextPool提高EfCore查询性能
  4. Qt for Android 部署流程分析
  5. python 分组箱线图_Python数据科学实践 | 绘图模块4
  6. dmf nmf_SQL Server 2019 –新的DMF sys.dm_db_page_info
  7. 判断完全二叉树（顺序存储）
  8. Sql Prompt安装图文教程
  9. android反编译打包出错,APK打包错误，能解决的给红包！
  10. 前端开发和后端开发究竟有什么区别？详细介绍
  11. 长江学者石照耀剖析精密减速机国产化之路—山坳上的机器人精密减速器
  12. 云计算中的Server Consolidation
  13. 电话号码的字母组合---2022/01/23
  14. 高德地图-添加路线规划（自驾、步行...）
  15. ContOs的网络配置
  16. 大学生性价比计算机推荐,快开学了 大学生该如何选择一款高性价比电脑？
  17. 考研数学基础 之线性代数通法——Chapter6:合同对角化与二次型
  18. vs2015 编译出错：Failed to register output......
  19. 同济大学计算机系拿奖学分绩点,萌新必看NO.8｜关于学分绩点奖学金，你想知道的都在这里...
  20. 学习中用到的python脚本记录

热门文章

  1. android cocos2dx 3.15.1创建工程,Cocos2d-x创建android项目（cocos2d-x系列三）
  2. 磁共振t1t2信号记忆顺口溜_10分钟记住脑出血核磁表现（一）：T1、T2篇
  3. java中fitlter,068.Python框架Django之DRF视图集使用
  4. linux mariadb忘记密码,忘记MySQL/MariaDB root密码的解决方法
  5. android 模块混淆配置,使用android studio混淆多个模块
  6. 计算机课奖金计算步骤,计算机二级excel真题：计算员工奖金
  7. 蓝魔i11pro运行linux,不仅仅是变大了 蓝魔i11pro新玩法
  8. mysql启用keepalive_mysql主从之keepalive+MySQL高可用
  9. python课程结课感悟_科学网—《互联网+引论与Python》课堂感想（七） - 张忆文的博文...
  10. c语言三元组稀疏矩阵的转置实验报告,稀疏矩阵快速转置 数据结构实验报告