百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> 解决ie6/7 input margin加倍4个方法
分享文章到:

解决ie6/7 input margin加倍4个方法

发布时间:01/15 来源: 浏览: 关键词:
input标签出现margin加倍现象,原来是父元素有水平margin边距导致,现在我们来分享解决这个问题的4个方法。

问题描述:input标签(不包含type="checkbox"类型标签)的父元素有加水平方向的margin,则水平方向的margin会成双倍显示。

问题代码:<div style="width:300px; height:35px; border:1px red solid;margin-left:15px;"><input type="text"/></div>

解决方法:

1.  给input标签的直属父标签加*display:inline;属性

<div style="width:300px; height:35px; border:1px red solid;margin-left:15px;float:left;*display:inline;"><input type="text"/></div>

(上面代码加float:left;只为保证div成块状显示,非必须!)

 
2.  把父元素的水平margin改成padding,直接避开ie6、7这个margin双倍bug (推荐)

<div style="width:300px; height:35px; border:1px red solid;padding-left:15px;"><input type="text"/></div>

3. 在该父元素内再添加一个无haslayout的div 或者一个有haslayout但无margin的DIV层

4. 若父、子元素都没加浮动属性,直接在父元素加overflow:hidden属性也能解决这个bug

方法虽然有4个,但是个人比较趋向于第二个,这样不会带来新的问题。

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有4人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板