注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学会珍惜

You've been saying for the longest time

 
 
 

日志

 
 

div怪异的margin-top问题  

2012-05-24 19:14:17|  分类: 前端开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

转自:WordPress

 

之前在做项目的时候发现一个以前还没有遇过的怪异问题,问题是这样的:如果我在一个div容器来嵌套一个div容器,然后对里面的div设置一个 margin-top属性,会发现在IE8ffchromeoperasafari等浏览器中margin-top对里面的div并没有起作用, 里面的div的上边框还是贴着外面div的上边框,而外面的div却奇怪的对它的上一级容器有相同值的margin-top。而IE6却不会出现上面这种情况,也就是说在IE6中里面的div对外面的divmargin-top的作用。如下代码:demo1

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

//html

<div id="first">

<div id="second">

<div id="thirst">

thirst</div>

second</div>

</div>

//css

body{

    margin:0;

    padding:0;

}

#first{

    width:600px;

    height:150px;

    background:#093;

}

#second{

    background:#96C;

    margin:10px;

    height:100px;

}

#thirst{

    background:#36F;

    margin:10px;

}

上网搜了一下,网上也说不出个所以然,我认为ie6的解析是对的,但这就是说这是其他浏览器的一个bug?我也不知道,毕竟那么多现代浏览器都出现了问题。不过解决这个问题的方法还是有的,下面分享几种我收集的方法:
第一种:
以上面的例子代码来说,当我在#first#second中都加上一个overflow:hidden;在其他浏览器上就显示正常了。如下:demo2

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

//css

body{

    margin:0;

    padding:0;

}

#first{

    width:600px;

    height:150px;

    background:#093;

overflow:hidden;

}

#second{

    background:#96C;

    margin:10px;

overflow:hidden;

    height:100px; /*ie6*/

}

#thirst{

    background:#36F;

    margin:10px;

}

 

 

第二种:当我#first#second中都加上一个border的时候,在其他浏览器上就显示正常了。如下:demo3

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

body{

    margin:0;

    padding:0;

}

#first{

    width:600px;

    height:150px;

    background:#093;

    border:1px solid #000;

}

#second{

    background:#96C;

    margin:10px;

    border:1px solid #F00;

    height:100px;

}

#thirst{

    background:#36F;

    margin:10px;

}

第三种:当在#first#second之前加上文字的时候,在其他浏览器上就显示正常了。如下:demo4

1

2

3

4

5

6

7

8

<div id="first">

first

<div id="second">

second

<div id="thirst">

thirst</div>

second</div>

</div>

第四种:当对#first#secondfloat:left;时,在其他浏览器上就显示正常了不过这时要给secondthird一个宽度来撑开。如下:demo5

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

body{

margin:0;

padding:0;

}

#first{

width:600px;

height:150px;

background:#093;

float:left;

}

#second{

background:#96C;

margin:10px;

float:left;

width:580px;

height:100px;

display:inline;

}

#thirst{

background:#36F;

margin:10px;

width:560px;

}

 

  评论这张
 
阅读(494)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017