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

2016-02-20 00:19 15 1 收藏

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

【 tulaoshi.com - Web开发 】

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

 

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

看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下未测试),如图显示:

 

(本文来源于图老师网站,更多请访问https://www.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森林讨论,期待有更好的解决方法,开始没有找到
经过次测试,这个方法屡试不爽,虽然不知道原因但是也算是一个解决方案了。欢迎留言说出您的解决方法,欢迎拍砖!,如果您知道原因欢迎留言告知,感激不尽!

来源:https://www.tulaoshi.com/n/20160220/1631650.html

延伸阅读
标签: Web开发
首先我们知道这个效果应该是一个老话题了。 今天整理文件的时候,发现自己以前的一些布局的解决方法躺在文件夹里很长时间了,翻翻老底吧 需要说明的是有幸也见到过CSSPLAY的老工程师站长对这个效果的实现,而且肯定是很早就给出来了。 闲话少说,上源码: 触发并利用IE6-layout的怪异特性,css实现: style type="text/css" .ie6-ou...
标签: 浏览器
还原IE8到IE6的经典界面   现在IE8已经成为越来越多用户的选择,尽管这样,还是有很多用户并不习惯IE8的界面布局,例如在IE8界面中,菜单栏居然位于工具栏的下面。此外,IE8当中的搜索工具条也没有什么必要,因为我们更习惯打开网站搜索。下面,笔者就教大家如何还原IE8的经典界面(如图)。 地址栏,请让位 怎样才能实现...
标签: Web开发
给a标签绑定了一个click事件用来触发ajax请求,在IE6中,请求时常会被中断,在其他浏览器中都一切正常。 在IE6中使用Fiddler2和httpWatch监视请求,经常会出现”aborted”,折腾了许久,相当的诡异。后来将a标签换成button,请求正常,最后经提醒,可能是a标签的默认事件中断了请求。但是,在HTML代码中,已经将a标签的href设置成了”javascri...
标签: Web开发
一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) style #wrapper { width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */ } /style 2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支...
标签: Web开发
本人专业是做UI的,写CSS已经有好几年了,目前刚刚在博客发布关于CSS的文章,欢迎有问题的朋友在有问必答论坛提问,我一定尽力解答。 1 针对firefox ie6 ie7的css样式 现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的hack方式就是使...

经验教程

672

收藏

30
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部