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

黎喃自语-网络营销运营杂记

那些关于未来的想法 要自己找解答 前进的轨道有多复杂 止不住想冒险的想法

 
 
 

日志

 
 
关于我

个性嘛,善良、理性、有点率性,但不任性,生活嘛,不太独立,需要别人扶一把,长相嘛,一般般,不承认难看的,朋友说,蛮可爱的         ----------------------------------------  QQ: 1272102018        mail: liwenxia.yuki@gmail.com

网易考拉推荐

解决IE6.0边距问题-IE6 IE7 IE8 CSS样式问题(一)  

2010-10-22 13:57:13|  分类: 计算机与 Interne |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

在使用IE6.0及IE5.5或更以前版本浏览页面时,有时会发现栏目与栏目之间的边距会非常大,造成页面变形。尤其是现在DIV+CSS为页面设计的主流后,这个问题更是明显突出。

在这里举一个例子,这是一段正确的代码:

<div style="background:#778899;height:500px;width:500px;"><div style="background:#DB7093;height:150px;width:150px;float: left;margin: 100px;"></div></div>

我们希望得到的结果是,一个简单的div(墨色的盒子)包含着一个居左浮动的div(粉色的盒子)。粉色的盒子距墨色的盒子有一个100px的左边界。

如图: IE7 IE8的效果

解决IE6.0边距问题-IE6 IE7 IE8 CSS样式问题(一) - 兔子 黎 - B2B网站运营杂记

但在IE6的效果却是这样,100px的间隙变成了200px。

解决IE6.0边距问题-IE6 IE7 IE8 CSS样式问题(一) - 兔子 黎 - B2B网站运营杂记

这是由于我们同时使用了float和margin,其实这是IE6.0的一个双倍浮动边界Bug(float margin),在IE7.0即以上版本中已经不存在这个问题。

如何解决IE6.0边距双倍的问题?

这时我们给粉色的盒子的CSS样式多加一个(display: inline;)参数即可解决这个问题。

修改CSS代码如下:

<div style="background:#778899;height:500px;width:500px;"><div style="background:#DB7093;height:150px;width:150px;float: left;margin: 100px;display: inline;"></div></div>

 

 

参考博文:
       http://hi.baidu.com/383215209/blog/item/ff88181fc58e08fc1bd5768c.html

相关教程:
经验之谈-超级牛最详细的Div+CSS布局案例
DIV+CSS如何居中,上下左右,三列DIV等多种布局案例

  评论这张
 
阅读(1196)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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