记得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为主了(罪恶啊。。。)。统一以后,同志们按照统一的方式修改吧~~