div+css兼容全浏览器技巧与差异整理

178 浏览量更新于2024-09-01 收藏 120KB PDF 举报

在开发跨浏览器兼容的网页时，使用div+CSS需要注意以下几点： 1. **DOCTYPE声明的重要性**：DOCTYPE声明对浏览器解析CSS的方式有很大影响。不同的DOCTYPE声明会导致浏览器以不同的模式处理CSS，因此在编写HTML时，确保正确使用<!DOCTYPE>声明，如<!DOCTYPE html>，有助于提升兼容性。 2. **Firefox与IE的margin差异**：在Firefox中，当设置`div`元素的`margin-left`和`margin-right`为`auto`时，div会自动居中。然而，在Internet Explorer中，这种行为可能无法生效，此时需要额外设置`margin`属性来实现居中。 3. **文本对齐与margin**：在Firefox中，如果`body`元素设置了`text-align`，那么`div`元素需要同时设置`margin: auto`（通常指`margin-left`和`margin-right`）才能居中。但在IE中，这可能不适用，需要特殊处理。 4. **padding与height/width**：Firefox支持`padding`后自动调整`height`和`width`，但IE并不遵循这一规则。为了在所有浏览器上保持一致，需要使用`!important`来强制设置`height`和`width`。 5. **CSS优先级与!important**：Firefox支持`!important`，允许开发者为特定浏览器设定优先级更高的样式。然而，IE不支持`!important`，因此在为Firefox设计样式时，可能需要使用它来避免冲突。 6. **垂直居中问题**：使用`vertical-align: middle`配合`line-height`可以实现div内文字的垂直居中，但这可能限制内容不换行。开发者需要根据需求权衡是否接受这个限制。 7. **鼠标指针样式**：`cursor:pointer`可以保证在FF和IE中显示相同的游标形状，而`hand`仅在IE中可用。 8. **链接样式调整**：在FF中，为了给链接添加边框和背景色，需要设置`display: block`并结合`float: left`。对于`menubar`中的链接，设置高度有助于避免底部位置错位。 9. **盒模型差异**：FF和IE的盒模型计算方式不同，可能导致布局出现2px的偏差。通过设置两个`margin`（一个常规的`margin`，另一个加上`!important`）并确保它们的顺序，可以在IE下正确应用样式，但要注意`!important`在IE中的特殊处理。 10. **列表元素的样式调整**：`ul`在FF和IE中的默认样式存在差异，通过设置`margin: 0; padding: 0;`可以统一两者的行为。 11. **浮动元素的管理**：浮动元素必须正确关闭，避免影响其他非浮动元素的布局。例如，确保每个浮动`div`都有相应的闭合标签。开发兼容性良好的div+CSS页面需要考虑浏览器间的差异，合理运用CSS技巧，以及理解和管理不同版本浏览器的特性。通过细心调整和测试，可以创建出在各种浏览器环境下都能良好展示的网页布局。

让让div+css兼容所有浏览器的一些注意事项兼容所有浏览器的一些注意事项

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*/}

3、关于容器的包涵关系、关于容器的包涵关系

很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽

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

weixin_38652636

粉丝: 6
资源: 896

div+css兼容全浏览器技巧与差异整理

css firefox火狐浏览器下的兼容性问题

div+css兼容所有浏览器的一些注意事项

div+css跨浏览器兼容技巧与注意事项全解析

div+css模拟select

div+css命名规范

Div+CSS布局居中

10个DIV+CSS需要注意的问题

div+css图片垂直居中

DIV+CSS 学习资料chm

div+css三栏布局演示

最新资源