`
DBear
  • 浏览: 228604 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类

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

IE面试CSSFirefoxOpera 
阅读更多

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

  • 大小: 1.2 KB
  • 大小: 1.1 KB
分享到：
| 来点基础的——td设置固定宽度后，会自动拉 ...
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics