IE6使用浮动去掉元素中的多余空白间距

唔落凡间

唔落凡间

2016-02-20 00:19

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的IE6使用浮动去掉元素中的多余空白间距,希望大家看完后能赶快学习起来。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

IE6的某些元素在表现上有多余的一些空白间隙,或者更形象的说是外边距(margin),要么是margin-top,要么是margin-bottom,当然还有margin-left,margin-right。这个在表单元素中特别常见。即使我们的reset css已经将这些元素的margin值设为0。
可以看一个实例:比如们想模拟一个双边框的文本框,如图:

 

看html代码:
1.spaninput type="text" name="textfield2" id="textfield2" //span
css代码:
1.span{border:1px solid #FCCC83; display:inline-block; overflow:hidden; zoom:1}
2.
 
3..url-input{ width:200px; height:18px; background-color:#FFFFFF;   padding:2px 0 0 3px; border:1px solid #FA9806;}
其他浏览器下正常,但是ie6下(ie7下未测试),如图显示:

 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

span和input之间明显有个间距。这个时候直接无语了。即使我们将input设为margin:0; padding:0;
百般无奈下只能使input浮动,因为以前也碰到过类似的问题li在IE中底部3像素的BUG(增加浮动解决问题)
看html代码:
1.div输入视频、网页、音乐的地址: spaninput type="text" name="textfield2" id="textfield2" //span input type="submit" name="button" id=""  value="分享" / /div
css代码:
view sourceprint?1.*{ margin:0; padding:0;  font-size:12px}
2..share-submit{margin:5px 0 20px; background-color:#F9FBFC; border:1px solid #D1D6E2; padding:8px; overflow:hidden; zoom:1; width:550px; margin:20px auto }
3..share-submit .url-input{width:200px;height:18px;background-color:#FFFFFF;   padding:2px 0 0 3px; float:left;border:1px solid #FA9806}
4..share-submit span,.share-submit input{ vertical-align:middle}
5..share-submit span{border:1px solid #FCCC83; display:inline-block; overflow:hidden; zoom:1}

该问题我昨天也拿到css森林讨论,期待有更好的解决方法,开始没有找到
经过次测试,这个方法屡试不爽,虽然不知道原因但是也算是一个解决方案了。欢迎留言说出您的解决方法,欢迎拍砖!,如果您知道原因欢迎留言告知,感激不尽!

展开更多 50%)
分享

猜你喜欢

IE6使用浮动去掉元素中的多余空白间距

Web开发
IE6使用浮动去掉元素中的多余空白间距

IE6图片元素img下出现多余空白的问题

Web开发
IE6图片元素img下出现多余空白的问题

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

IE6图片元素img下出现多余空白问题

Web开发
IE6图片元素img下出现多余空白问题

IE6图片img下出现多余空白的解决方法

Web开发
IE6图片img下出现多余空白的解决方法

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

IE6在解析浮动:3像素Bug

Web开发
IE6在解析浮动:3像素Bug

IE6下注释引起的文字溢出和浮动错位

Web开发
IE6下注释引起的文字溢出和浮动错位

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

黑客选择CSS挂马 CSS挂马攻防实录

黑客选择CSS挂马 CSS挂马攻防实录

CSS网页布局:tbody标签与thead和tfoot标签

CSS网页布局:tbody标签与thead和tfoot标签
下拉加载更多内容 ↓