`

网页排版中IE6、Firefox、ie7的兼容性问题

    博客分类:
  • HTML
阅读更多

下图是本站统计系统中访客详情中浏览器查看率,IE6占据百分之40多。虽然浏览器的种类很多,光一个IE就有IE5.5,IE6,IE7,IE8等多版本,在这众多的高版本中,IE6依然受大多数用户所喜欢,所以排版时候就不的不去考虑IE6的兼容问题,要不然会损失很多访问者。

下面列举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. 重构你的代码
很多情况下,解决一个问题,可能比重构你的代码要花更多的时间。
 

分享到:
评论

相关推荐

    IE和Firefox浏览器CSS网页布局不同点

    然而,不同的浏览器在解析CSS时可能存在兼容性问题,尤其是在IE(Internet Explorer)和Firefox之间。这些差异可能会导致布局在不同浏览器中显示不一致,给开发者带来困扰。以下是一些主要的不同点: 1. **document...

    11款超赞的浏览器兼容性测试工具.docx

    帮助你测试网页在Safari、Chrome、Firefox和Opera浏览器中是否正常,IE以前也有的,网站上说应微软要求去掉了。 了解Spoon Browser Sandbox的重要性:Spoon Browser Sandbox是一个可以帮助你测试网页在多个浏览器中...

    IE 7 浏览器 64位

    相比IE6,IE7对Web标准的支持有所提升,如CSS2、XPath和XSLT等,这有助于正确显示符合标准的网页,减少网页排版问题。 8. **历史记录和收藏夹管理** IE7改进了历史记录和收藏夹的管理方式,用户可以更方便地整理...

    163网易编辑器(兼容FF,IE6,IE7,IE8)

    编辑器的设计目标是提供一个友好、高效的文字录入与排版环境,使得用户无论在Firefox(FF)、Internet Explorer 6(IE6)、Internet Explorer 7(IE7)还是Internet Explorer 8(IE8)等不同浏览器下都能获得一致的...

    中文网页重设与排版一致化浏览器排版效果

    7. **浏览器兼容性**:针对IE、Chrome、Firefox、Safari等主流浏览器,进行兼容性测试和调整。 在CSS文件`sofish-typo.css`中,可能会包含针对以上问题的解决方案,例如使用CSS预处理器(如Sass或Less)定义变量和...

    IE.zip_IE

    7. **兼容性**:IE浏览器曾因兼容性问题而广为人知,开发者需要考虑如何使自制浏览器能正确显示各种标准和非标准的网页。 8. **性能优化**:浏览器需要快速加载和渲染页面,这就涉及到内存管理、多线程、预加载策略...

    基础IE概论培训课件.zip

    3. **兼容性问题**:由于IE对标准的支持程度不同,开发者需要为IE编写额外的代码来确保页面在IE上的正确显示。 **四、IE的衰落与替代品** 随着Web 2.0时代的到来,其他浏览器如Firefox、Chrome、Safari和Opera等,...

    在IE浏览器中正常显示的字体效果设置.docx

    在描述的问题中,我们注意到在IE7和IE8中,当ClearType启用时,英文和数字的显示与Firefox和Chrome等其他浏览器有所不同。这是因为IE7和IE8默认启用了ClearType,而其他浏览器可能没有。这种差异主要体现在字体的...

    空格&nbsp在ie、firefox、chrome浏览器中显示距离不一致

    在网页开发过程中,浏览器兼容性问题常常困扰着开发者。标题提到的问题——“空格在ie、firefox、chrome浏览器中显示距离不一致”,是由于不同浏览器对空格字符(包括不可见的HTML实体`&nbsp;`)处理方式的差异导致...

    网页设计实习总结.doc

    实习过程中强调了在布局时要注意不同浏览器(如IE6、IE7、IE8、Firefox等)的显示差异,并通过调整CSS来优化兼容性。常见的解决方法包括减少float的使用,增加overflow:hidden,设定固定宽度等。 5. **网页布局原则...

    firefox css自动换行的实现方法

    本文将详细介绍如何在Firefox浏览器中实现CSS自动换行的功能,特别是针对Firefox中缺乏原生支持的问题,我们将探讨一种可行的解决方案。 #### 一、CSS自动换行的基本概念 在网页设计中,自动换行(或称为文本换行...

    JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动

    - 兼容性修复:可能对旧版浏览器存在的兼容性问题进行了修正,保证不同浏览器环境下的正常运行。 从提供的部分内容中,我们可以看到该图片查看器的代码实现: - 使用JavaScript语言编写,其中包括变量声明和函数...

    网页设计实习总结范文.doc

    CSS+Div布局虽然简洁灵活,但存在浏览器兼容性问题,例如IE与Firefox的显示差异。为此,我们需要进行浏览器测试,修复可能出现的样式问题,确保网页在各浏览器中展示效果一致。 实习初期,我经历了公司的面试和培训...

    一键保存网页为PDF_V1.2

    此外,新版本对浏览器的兼容性进行了显著提升,支持包括IE8、IE9在内的老版本浏览器,以及广泛使用的谷歌浏览器和火狐浏览器。这大大拓宽了该工具的应用范围,使得不同平台和环境下的用户都能方便地使用。对于那些仍...

    2021网页设计工作实习报告范文.docx

    然而,这种技术的一个常见问题是浏览器的兼容性问题,需要对常见的浏览器如IE和Firefox进行测试,确保在各浏览器中的显示效果一致。 实习期间,我面临了许多实际问题,如代码编写、页面美化和浏览器兼容性调试等。...

    网页设计作业.zip

    9. 浏览器兼容性:了解不同浏览器之间的差异,如IE、Chrome、Firefox、Safari等,以及如何通过浏览器前缀和polyfills解决兼容性问题。 10. 工具和框架:熟悉使用代码编辑器(如Visual Studio Code、Sublime Text)...

    网页精确打印控件源码

    网页精确打印控件源码是针对网页打印过程中可能出现的浏览器兼容性问题以及精度不准确而设计的解决方案。在网页开发中,打印功能是一项常见的需求,它允许用户将网页内容输出到纸上或者保存为PDF。然而,不同的...

    计算机实习报告三篇.docx

    2. **CSS兼容性问题**:CSS+Div布局的一个挑战是浏览器兼容性。不同的浏览器可能对CSS的解析方式有所不同,可能导致页面在不同浏览器下显示效果不一致,例如IE与Firefox的兼容问题。因此,网页设计师需要进行浏览器...

Global site tag (gtag.js) - Google Analytics