刚接触用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]
学习了,对编辑不太懂呀!
这个还真不知道 我一般只用chrome
觉得火狐的还是比较标准的,严格按照规范来。
不太懂CSS才起步··先放到收藏夹了··
浏览器太多,网站开发者太痛苦。
今天放假过来看看。
以后可以多多交流呀
这几天比较忙,现在来看看了。学习中“
IE问题太多了。
这个好像是有点差别的,调兼容性的时候就感觉的到了
盒模型处理起来有时确实比较麻烦,尤其要考虑各浏览器兼容的时候
呵呵,不错。做东西的时候每完成一次布局我的预览会同时用 IE6、IE8、FF ,兼容了以后其它浏览器不管了。
问下博主童鞋,你的博客空间是哪的?
我的打开好慢,经常被批评,想再找空间啊。
我的是美国的
学习啦 有点深奥 对div了解甚少
在CSS中可以写成两个WIDTH么????
博主好专业哦
学习了~
技术博啊,不懂技术的飘过,顺便帮博主点个广告。哈哈
谢谢了,我也去你的看看。哈哈
好东西啊啊 学习中!
如果主流浏览器都按Web标准来开发,就不会有这么多兼容问题了。