CSS技巧之兼容IE/Firefox(DIV在Firefox中大了2px?)

刚接触用Div布局时,许多人都只针对IE开发。但随着其他标准浏览器在市场中出现的比重越来越大、人们对于标准越来越重视,目前针对W3C进行开发、对IE系列进行兼容已经成为主流。

Div标签,作为标准化Web应用来说,已经成为最重要一个名词。甚至在网络上经常出现“DIV+CSS”这类词语来表示标准化Web开发。

曾经在给一个老网站做兼容Firefox时出现一个问题,现在看来这完全不是问题,但在当时着实费了一番脑筋。
当时在将页面中凌乱不堪的结构重新布局时发现,有些Div在Firefox中会多出2px,有些则没有。
太令人费解了,同一个页面,对Div居然有2种解释?

但在观察后发现,所有大了2px的Div都有边框,就是这个边框使得Div大了2px。
一番google后,终于明白其中的道理。
IE和W3C分别有一套盒子模型,Firefox中采用W3C标准模型,而IE中则采用Microsoft自己的标准,
看下面2个示例图:

很明显,W3C标准认为,盒子的宽度仅仅是内容的宽度,而IE标准认为“内容+padding+border”才是盒子的宽度,
所以在我设定了border的Div中,才会出现在Firefox大了2px(左右各1px的border)

我们可以将用CSS Hack 来区分2个标准:
div_hasborder {width:98px;width:100px !important; border:1px solid #000000;}

另外,如果在定义HTML使用了
那么就不会有这个问题,所有的Box模型都将使用W3C标准,不管是在IE中还是其他浏览器中。

文章出处:http://www.nixiaofeng.com/99.html
文章转载自:XiaoF’s an Other Blog [http://www.nixiaofeng.com]

相关内容:

Leave a comment

20 Comments.

  1. 学习了,对编辑不太懂呀!

  2. 这个还真不知道 我一般只用chrome

  3. 觉得火狐的还是比较标准的,严格按照规范来。

  4. 不太懂CSS才起步··先放到收藏夹了··

  5. 浏览器太多,网站开发者太痛苦。

  6. 今天放假过来看看。

  7. 这几天比较忙,现在来看看了。学习中“

  8. IE问题太多了。

  9. 这个好像是有点差别的,调兼容性的时候就感觉的到了

  10. 盒模型处理起来有时确实比较麻烦,尤其要考虑各浏览器兼容的时候

  11. 呵呵,不错。做东西的时候每完成一次布局我的预览会同时用 IE6、IE8、FF ,兼容了以后其它浏览器不管了。
    问下博主童鞋,你的博客空间是哪的?
    我的打开好慢,经常被批评,想再找空间啊。

  12. 学习啦 有点深奥 对div了解甚少

  13. 在CSS中可以写成两个WIDTH么????

  14. 博主好专业哦
    学习了~

  15. 技术博啊,不懂技术的飘过,顺便帮博主点个广告。哈哈

  16. 好东西啊啊 学习中!

  17. 如果主流浏览器都按Web标准来开发,就不会有这么多兼容问题了。

发表评论

您的电子邮箱不会被公开。 标记为 * 的区域必须填写

*


您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

有人回复时邮件通知我