如何解决IE，FF的div宽度兼容问题？

DBear

浏览: 231240 次
性别:
来自: 上海

最近访客更多访客>>

oracle1234

进击的小白

chw751039

Sdky

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端技术

IE 面试 CSS Firefox Opera

记得n久以前，引了别的大侠的一篇FF，IEdiv宽度兼容方面的文章，结果自己不求甚解，读文儿读半句，结果就是使用一个巨愚蠢的方法解决一个简单的问题使用了好久。

不多说了，这个兼容问题很常见，就是width，padding，margin之间的那点事。

习惯那我这样裸写（所谓裸写，就是html头不加!DOCTYPE做限制）html代码的同学大概都知道，IE和FF处理这三者关系的方式是不同的。

FF：实际所占width = 设置width + padding + margin

IE：实际所占width = 设置width，因此真正可用于承载内容的区域width=设置width-padding-margin

看例子吧：

<div style="width:220px;height:120px; background-color:blue;">
   <div style="width: 200px; padding: 30px; margin: 10px; background-color: red; height: 100px;">
        <div style="background-color: green; height: 100%; width: 100%;"></div>
   </div>
</div>

这段代码在IE8下的显示如下

FF3显示如下：

为了统一这种差异，我最开始或者说直到今天以前使用的方法都只是一个：用css hack方法，针对IE特别设置宽度。。。

其实这个方法不是不行，而是不太优雅。。。。前几天面试，面试官给我出了这道题，我很想当然就说出了自己这个答案，本以为很正确，结果面试官问我，没有别的办法？我就愣了，还有。。。别的。。。方法？想不出，立刻请教，面试官说，用!DocType，可惜我完全对这个没印象，连恍然大悟的表情都做不出。回家赶紧查资料，结果发现自己漏掉了一大块基础知识。废话说多了，直接给答案吧。

把你的html文件第一行加上这个<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">，这个差异就被统一了~~~

为什么？解答这个问题要首先了解!doctype。给个链接，这个大侠写的很详细。http://blog.csdn.net/high_mount/archive/2007/06/20/1658790.aspx

简单说就是，在不设置doctype的情况下，IE和FF为html提供的默认处理方式是不同的，但通过包含 XHTML 1.0 Transitional DOCTYPE，能触发 Standards 模式（在 Internet Explorer 和 Opera 中）和 Almost Standards 模式（在 Firefox 中），而FF中的Almost Standards模式跟IE的Standards模式是相同的，因此，样式规则上就统一啦。统一后，效果就统一变成

也就是FF的样式。难看点哈？因为我在写CSS的时候以IE为主了（罪恶啊。。。）。统一以后，同志们按照统一的方式修改吧~~

查看图片附件

分享到：

CSS3实现红心动态变化效果 | 来点基础的——td设置固定宽度后，会自动拉 ...

2011-01-29 18:40
浏览 5409
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论