防止IE6出现BUG的十种常见解决方法
以下介绍的十种解决方法是针对IE6经常会出现的DIV+CSS布局BUG而使用的一些默认设置,由于IE6的BUG比较多,所以我们制作页面时经常会碰到一些莫名其妙的布局问题,每次碰到问题我们就会查找对因的页面位置与CSS,使用以下解决方法就可以避免一些常见的IE6的BUG问题。 |
虽然说IE8已经来了,并且表现不错。8个小时突破1200W下载,远远地超过24小时下载800W的firefox。但对于整个互联网,IE6仍然是用户最多的浏览器。暂不说IE6怎样,把Web的表现做得更好,既是一种责任,也是一种能力的表现。如果你依然对IE6所出现的种种问题无可奈何,就让我带你来看一下来自SitePoint的 10 Fixes That Solve IE6 Problems,学会这10个方法,你将可以解决大部分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:
<!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 {
|
8. 避免按比例确定的尺寸
比例会让IE6变得错乱,除非你给父元素添加一个确切的高度。不然,给其他的加上!important
,例如:
body{ margin: 2% 0 !important; margin: 20px 0; /* IE6 可读 */ } |
9. 尽早测试,经常测试
别忘记尽早测试,经常测试, 除非你的程度已经完成。不然,你可能花更多的时间来解决IE6的问题。一般情况下,如果你的网站能在IE6和firefox下良好表现,估计其他浏览器就不会有什么大问题了。(至少我自己深有体会)
10. 重构你的代码
很多情况下,解决一个问题,可能比重构你的代码要花更多的时间。比如上一次给公司写一个频道页面的,没有一边制作,一边测试IE6的表现,导致最近有很多奇怪的问题,因为布局比较复杂。后来,干脆重构代码。用了2天。我想,如果是想解决方法,或许2天都搞不定。
防止IE6出现BUG的十种常见解决方法相关推荐
- ueditor上传图片回调_(常见解决方法)UEditor报错“后端配置项没有正常加载,上传插件不能正常使用”...
(常见解决方法)UEditor报错"后端配置项没有正常加载,上传插件不能正常使用"_向来萧瑟也无畏-CSDN博客blog.csdn.net 报错信息 详见此文的"排错过 ...
- hp laser103 属性没有配置项_(常见解决方法)UEditor报错“后端配置项没有正常加载,上传插件不能正常使用”...
(常见解决方法)UEditor报错"后端配置项没有正常加载,上传插件不能正常使用"_向来萧瑟也无畏-CSDN博客blog.csdn.net 报错信息 详见此文的"排错过 ...
- Git:代码冲突常见解决方法
Git:代码冲突常见解决方法 参考文章: (1)Git:代码冲突常见解决方法 (2)https://www.cnblogs.com/zhujiabin/p/10270181.html 备忘一下.
- 安装ubuntu出现BUG soft lockup的解决方法(16.04 14.04)
安装ubuntu出现BUG soft lockup的解决方法(16.04 14.04) 参考文章: (1)安装ubuntu出现BUG soft lockup的解决方法(16.04 14.04) (2) ...
- vm15虚拟机没声音常见解决方法与设置了声卡也没声音
vm虚拟机没声音的常见解决方法 一.vm软件问题 右下角菜单的[虚拟机]>>[设置]或虚拟机选项卡中的[编辑虚拟机设置],在弹出的设置框中,选择[声卡],确保设置如下图,尤其是" ...
- 跨域问题及常见解决方法---以 Geoserver 为例
跨域问题及常见解决方法---以 Geoserver 为例 跨域问题 跨域简介 解决跨域常用方法 前端代理 后端处理 其他代理(nginx) Geoserver 解决跨域 免费解决跨域工具:[geose ...
- IE6,IE7,IE8 css bug汇总以及兼容解决方法
断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1: ...
- ie6,ie7,ie8 css bug汇总以及兼容解决方法 - xhuangtao
1:li边距"无故"增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑 ...
- PHP中文乱码的常见解决方法总结
转载地址:http://www.cnblogs.com/echohao/p/4719688.html PHP中文乱码是PHP开发中的常见问题之一.PHP中文乱码有时发生在网页本身,有些产生在于MySQ ...
最新文章
- TypeScript 3.4.5 发布,修复节点运行问题
- icp mysql_MySQL · 特性分析 · Index Condition Pushdown (ICP)
- webpy + nginx + fastcgi 构建python应用
- 转译:Oracle 中 Object_iD 和 Data_Object_ID 的区别
- boost::depth_first_search用法的测试程序
- 【树莓派智能门锁】接线布局安装【3】
- 1到n阶乘算法的改进
- ios 如何获得系统时间和日期
- IDirect3DDevice9::SetClipPlane
- 嵌入式Linux系统编程学习之二十五信号量
- [专栏精选]Unity动画系统的RootMotion
- 编译liblinear
- linux 软连接【转】
- Crossing Road Simulation
- ACM/IOI 国家队集训队论文集锦
- 巧用CSS文件愚人节恶搞(转)
- 在警察领域高级人脸识别技术的一致性
- Html5中文显示乱码
- 移动端软件测试面试题及答案-2021年最新版
- IQD文件模板以及cs7g.ini信息