网站首页/网页设计列表/内容

如何处理DIV边距属性在Chrome与IE中不兼容问题

网页设计2023-06-11阅读
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。

做网页编辑的最怕的就是浏览器不兼容性问题,这不今天也让俺碰到了DIV边距属性在Chrome和IE中不兼容问题,具体如下:

今天在单位给某企业网站做页面,然后回家进行修改,首先在IE中打开浏览,晕,惨不忍睹,怎么回事,开始以为是CSS样式没拷过来,查看没丢,一下想到估计是浏览器兼容性问题,最后经仔细查看原因出在div中的padding设置上,具体如下:

如果是以下的设置Chrome和IE的设置没问题
代码如下:

div1

width:960px; 
margin:0px; 
padding:0px; 

 

如果是出现以下设置:

div2

width:960px; 
margin:0px; 
padding:0px 10px 0px 10px; 
}

那么在Chrome就会把padding的20px加到外面,这样div宽度就是980px了,但IE中仍然是960px,这个希望碰到以上的朋友注意下。
另外还发现,border和padding一样,margin的值均算在“width”的外面。同时还有一些情况有所不同,例如在没有设置float的情况下,Chrome会把div2当成position:absolute,而在IE中却会把他当成poisttion:relative,这样我们在设置中尽量都是块级元素的float为left,以上就是是DIV边距属性在Chrome和IE中不兼容问题以及个人的一些小小启发与解决方法,希望对大家有所帮助。


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

……

相关阅读