关于DIV 边距属性在Chrome和IE中的区别


本文摘自PHP中文网,作者不言,侵删。

这篇文章主要介绍了关于DIV 边距属性在Chrome和IE中的区别,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

突然间,在Chrome下看起来很整齐的布局,在IE下变成一团糟。为了找出原因,做了一些测试,晒出来和大家分享一下

突然间,在Chrome下看起来很整齐的布局,在IE下变成一团糟。为了找出原因,我改动了p的background-color属性。最后,发现同一个p的宽度在IE和Chrome下却不一样。这大晚上的,真是怪吓人滴!
之后,做了个测试。当:

1

2

3

4

5

6

p1

{

width:960px;

margin:0px;

padding:0px;

}

这时,在两个浏览器下是没有区别滴!总宽度均是960px。
但是,当:

1

2

3

4

5

6

p1

{

width:960px;

margin:0px;

padding:0px 10px 0px 10px;

}

这时,Chrome就不干了。她居然把padding的20px加在了外面,这样p1的总宽度就是960px+10px+10px=980px;而,在IE中p1的宽度仍是960px;
按照我的思维,感觉padding应该算在width里面滴,没想到Chrome这么倔。
经过测试,border和padding一样,margin的值均算在“width”的外面。
还有,在没有设置float的情况下,Chrome会把p1当成position:absolute,而IE会把其当成poisttion:relative;所以,尽量都这是块级元素的float为left!
真悲催,浏览器不兼容让我这个门外汉很痛苦呀!

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

CSS3中@keyframes动画的实现

点击按钮文字变成input框,点击保存变成文字的实现

关于移动 web 端屏幕适配(rem)的介绍

以上就是关于DIV 边距属性在Chrome和IE中的区别的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

cookie的具体使用方法

如何在chrome中安装react开发工具

html5 websql四种基本操作的介绍

轶事:chrome小恐龙背后你不知道的故事

ie如何关闭javascript脚本

你可能不知道的chrome debug专用的函数!

ie8兼容的重要属性x-ua-compatible

html5 viewport总结讲述

什么是javascript事件模型

分享移动端网页宽度值实例代码

更多相关阅读请进入《DIV边距》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...