【IE6的疯狂之十三】使用浮动去掉元素中的多余空白间距

IE6的某些元素在表现上有多余的一些空白间隙,或者更形象的说是“外边距(margin)”,要么是margin-top,要么是margin-bottom,当然还有margin-left,margin-right。这个在表单元素中特别常见。即使我们的reset css已经将这些元素的margin值设为0。

可以看一个实例:比如们想模拟一个双边框的文本框,如图:

看html代码:

[code=”html”]

[/code]

css代码:

[code=”css”]

span{border:1px solid #FCCC83; display:inline-block; overflow:hidden; zoom:1}

.url-input{ width:200px; height:18px; background-color:#FFFFFF;?? padding:2px 0 0 3px; border:1px solid #FA9806;}

[/code]

其他浏览器下正常,但是ie6下(ie7下未测试),如图显示:

span和input之间明显有个间距。这个时候直接无语了。即使我们将input设为margin:0; padding:0;

百般无奈下只能使input浮动,因为以前也碰到过类似的问题——【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题):https://www.html.cn/archives/421

看html代码:

[code=”html”]

输入视频、网页、音乐的地址:

[/code]

css代码:

[code=”css”]

*{ margin:0; padding:0;? font-size:12px}
.share-submit{margin:5px 0 20px; background-color:#F9FBFC; border:1px solid #D1D6E2; padding:8px; overflow:hidden; zoom:1; width:550px; margin:20px auto }
.share-submit .url-input{width:200px;height:18px;background-color:#FFFFFF;?? padding:2px 0 0 3px; float:left;border:1px solid #FA9806}
.share-submit span,.share-submit input{ vertical-align:middle}
.share-submit span{border:1px solid #FCCC83; display:inline-block; overflow:hidden; zoom:1}

[/code]

查看demo:https://www.html.cn/demo/two-border/two-border.html

该问题我昨天也拿到css森林讨论,期待有更好的解决方法,开始没有找到

经过次测试,这个方法屡试不爽,虽然不知道原因但是也算是一个解决方案了。欢迎留言说出您的解决方法,欢迎拍砖!,如果您知道原因欢迎留言告知,感激不尽!

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 【IE6的疯狂之十三】使用浮动去掉元素中的多余空白间距

评论 6

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    form{margin-top:50px;}
    p{border:1px solid #f1ce8e; width:150px;}
    .text{border:1px solid #fc9908; width:148px; height:20px; line-height:20px; *margin:-1px 0;}
    样式还需要重置,就实现你要的效果了,不知道是否符合你的要求。

    yanzi9年前 (2010-01-04)回复
  2. #-48

    这是html

    yanzi9年前 (2010-01-04)回复
  3. #-47

    这样的问题在实际中经常会遇到,不知为了实现而耗费很大的力气值不值得,不过既然能解决还是学习了

    心灵·9年前 (2010-01-07)回复
  4. #-46

    我基本是让两者都浮动解决问题

    26889年前 (2010-01-12)回复
  5. #-45

    刚才试了下,发现问题出在display:inline-block和zoom:1上面,在IE6写这两个就会出现那个问题。所以改成display:inline-block; _display:inline;就可以了

    天涯9年前 (2010-03-25)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏