CSS技巧：实现跨浏览器（IE6-9, Firefox, Chrome）兼容性

129 浏览量更新于2024-08-30 收藏 118KB PDF 举报

"本文主要探讨如何实现div+css在不同浏览器，包括IE6、IE7、IE8、IE9以及Firefox、Chrome等之间的兼容性。文章列举了一系列常见问题及解决方案，涉及DOCTYPE的影响、居中对齐、盒模型差异、cursor样式、链接边框与背景色、垂直居中等问题。" 在网页开发中，CSS兼容性是常见的挑战之一，尤其是在跨浏览器的情况下。本文提供的技巧可以帮助开发者更好地处理这些兼容性问题。 1. DOCTYPE的影响：DOCTYPE声明会影响到浏览器的渲染模式，不正确的DOCTYPE可能导致浏览器进入怪异模式，从而影响CSS的解析。因此，推荐使用标准的DOCTYPE如`<!DOCTYPE html>`来确保浏览器以标准模式渲染页面。 2. 居中对齐：Firefox可以通过设置`margin-left`和`margin-right`为`auto`使div居中，但IE浏览器不支持此方法。此时，可以使用`text-align:center`在body上，再结合`margin: auto`在div上实现跨浏览器的居中效果。 3. padding与尺寸：Firefox会因为padding增加div的高度和宽度，但IE不会。为了解决这个问题，可以在IE特定的CSS规则中使用`!important`来设置height和width。 4. `!important`的使用：Firefox支持`!important`来强制应用某个样式，而IE会忽略。这可以通过针对不同浏览器编写特定的CSS规则来应对。 5. 垂直居中：对于div内的文本，可以使用`vertical-align: middle;`和`line-height`来实现垂直居中，但这种方法不适用于多行内容。 6. 游标样式：`cursor: pointer;`在所有主流浏览器中都会显示为手形，而`cursor: hand;`仅适用于IE。 7. 链接边框和背景色：Firefox需要`display: block;`和`float: left;`来添加链接边框和背景色，同时设置高度以避免底部错位。 8. 盒模型差异：Firefox和IE对盒模型的解释不同，可以使用CSS重定义`margin`来解决2px的差异，例如`margin:30px!important;margin:28px;`，注意顺序不能反。 9. ul标签样式：Firefox和IE对ul的默认margin和padding值处理不同，统一设置`ul{margin:0;padding:0;}`可以解决大部分问题。 10. 浮动元素闭合：浮动的div应该正确闭合，以防止布局问题。例如，可以使用`clear:both`或创建一个清除浮动的div来解决浮动元素后的元素定位问题。理解并掌握这些CSS兼容性技巧是构建跨浏览器兼容网页的关键。通过细致的CSS编写和针对不同浏览器的特殊规则，可以显著提高网页在各种环境下的表现。

如何让如何让div+css兼容兼容ie6 ie7 ie8 ie9和和FireFox Chrome等浏览等浏览

器器

1.DOCTYPE 影响 CSS 处理

2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中

了。缺点是要控制内容不要换行

7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度

是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： div{margin:30px!important;margin:28px;}注意这两个

margin的顺序一定不能写反，据阿捷的说法! important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成

这样： div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx! important;

11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;}就能解决大部分问题

注意事项：

1、float的div一定要闭合。

例如：(其中floatA、floatB的属性已经设置为float:left;)

<#div id=”floatA” ></#div>

<#div id=”floatB” ></#div>

<#div id=”NOTfloatC” ></#div>

这里的NOTfloatC并不希望继续平移，而是希望往下排。

这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。

在

<#div class=”floatB”></#div>

<#div class=”NOTfloatC”></#div>

之间加上

<#div class=”clear”></#div>

这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，

否则会产生异常。

并且将clear这种样式定义为为如下即可：

复制代码代码如下:

.clear{

clear:both;

}

此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;

当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做

到，这样就达到了兼容。

例如某一个wrapper如下定义：

复制代码代码如下:

.colwrapper{

overflow:hidden;

zoom:1;

margin:5px auto;}

2、margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。

解决方案是在这个div里面加上display:inline;

例如：

<#div id=”imfloat”></#div>

相应的css为

复制代码代码如下:

#IamFloat{

float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/}

下载后可阅读完整内容，剩余5页未读，立即下载

weixin_38657115

粉丝: 5
资源: 905

CSS技巧：实现跨浏览器（IE6-9, Firefox, Chrome）兼容性

div+css兼容ie6ie7ie8ie9和FireFoxChrome等浏览器方法[借鉴].pdf

如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.docx

ARKit（iOS的增强现实）：ARKit的物体检测与空间映射.docx

基于android SmartRefreshLayout h.zip

国内市场：功能化脂质市场现状研究分析与发展前景预测报告（2024版）.docx

14) REHub - 价格比较、联盟营销、多供应商商店、社区主题 v19.7.7.zip

技术资料分享Z-Stackapi函数非常好的技术资料.zip

6.FreeRTOS之任务通知

Sawmill_Sales_CN.ppt

通用面试技巧-常见面试问题.zip

最新资源