分太多,问个浏览器兼容的问题吧

mykelly6 2010-03-19 03:26:31

<div style="
background:blue;
width:600px;
height:70px;
margin:10px 0 0 0;
color:#FFF;
border:0px solid #000;">
<p style="margin:30px 0 0 220px;">12345
</p>
</div>

在FF下面边框宽度是0的话,div上面就有等于p的margin值的一段空白,但是把边框宽度设成1,那片空白就没有了。
这是为什么?
...全文
137 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
mykelly6 2010-03-24
  • 打赏
  • 举报
回复
4连休回来结贴,其实昨天是睡过头了,又请了一天假,O(∩_∩)O哈哈~
浪客 2010-03-21
  • 打赏
  • 举报
回复
学习~~~~~~~~~~~~~~~~~··
cs5276 2010-03-20
  • 打赏
  • 举报
回复
友情帮顶,border,顾名思义,是分界线的意思,有了它,边距(margin)的计算就要另当别论,当它为0的时候,FF和IE8就会依照WEB标准将边距重叠起来,只取上下相邻两边距的大者当做两个box的边距之和,而IE6的理解似乎是正确的,实际上这是IE6的hack。

很白话的解答,呵呵。
ddcatlee 2010-03-19
  • 打赏
  • 举报
回复
边距压缩(重叠)
w3c中的规定,可以去w3c.org查一下,或者看
http://www.ddcat.net/blog/?p=138
happy664618843 2010-03-19
  • 打赏
  • 举报
回复
marign在IE中为两倍的距离
zhousq00 2010-03-19
  • 打赏
  • 举报
回复
各个IE之间的兼容问题真的是能搞得人头大
我是身有体会呀!
mykelly6 2010-03-19
  • 打赏
  • 举报
回复
[Quote=引用 8 楼 hehe123456789 的回复:]
在默认情况下IE包含border的,而firefox是不包含border的,所以当你的border设置为0时firefox的border为0.此时margin属性的效果就没有作用了,而IE本身默认就有border所以可以。
[/Quote]
我好像把border设为0,IE7的效果还是那样的。
hehe123456789 2010-03-19
  • 打赏
  • 举报
回复
在默认情况下IE包含border的,而firefox是不包含border的,所以当你的border设置为0时firefox的border为0.此时margin属性的效果就没有作用了,而IE本身默认就有border所以可以。
abcloulou 2010-03-19
  • 打赏
  • 举报
回复
[Quote=引用楼主 mykelly6 的回复:]
HTML code

<div style="
background:blue;
width:600px;
height:70px;
margin:10px 0 0 0;
color:#FFF;
border:0px solid #000;">
<p style="margin:30px 0 0 220px;">12345
</p>……
[/Quote]


所谓的空白边叠加,空白边叠加出现在二个块级元素的垂直方向。
郭大侠_ 2010-03-19
  • 打赏
  • 举报
回复
[Quote=引用 3 楼 bhbhxy 的回复:]
FF的BUG
在firefox中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会 “转移”给外层div。

以上边缘为例:
<div style="background-color:green; color:white;" >绿色</div>
<div style="background-col……
[/Quote]
IE8 和 ff3.6下看没有任何区别,都是白色的。
mykelly6 2010-03-19
  • 打赏
  • 举报
回复
貌似给父元素加个1px的padding-top比较好了。

我看了一下,IE8跟FF都这样,IE7没问题。
认真为自己 2010-03-19
  • 打赏
  • 举报
回复
说实话 这问题还真不好回答!
我的解决方法是将<p>标记添加float


<div style="
background:blue;
width:600px;
height:70px;
margin:10px 0 0 0;
color:#FFF;
border:0px solid #000;">
<p style="margin:30px 0 0 220px;float:left">12345
</p>
</div>
bhbhxy 2010-03-19
  • 打赏
  • 举报
回复
FF的BUG
在firefox中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会 “转移”给外层div。

以上边缘为例:
<div style="background-color:green; color:white;" >绿色</div>
<div style="background-color: black;height:300px; padding-top:0px;">

<div style="background-color: black;height:300px;">
<div style="margin-top:50px;height:150px; background-color:red; color:white;">红色</div>
</div>
</div>

在Firefox中绿色和红色div之间会有50px的白色空隙,而在IE中则为黑色。


解决方法:

1、给红色div的样式增加float属性,例如float:left; width:100%;

2、修改任一黑色div的padding属性为非0值,例如padding-top:1px;

3、红色div上方增加非空元素,例如<div style="height:0;"> </div>
ForDream159 2010-03-19
  • 打赏
  • 举报
回复
我也想知道!
hookee 2010-03-19
  • 打赏
  • 举报
回复
用padding替换margin

<div style="
background:blue;
width:600px;
height:60px;
padding:10px 0 0 0;
color:#FFF;
border:0px solid #000;">
<p style="margin:30px 0 0 220px;">12345</p>
</div>

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧