css给button按钮设置padding样式无效解决办法
发布时间：2016-01-13, 11:48:58 分类：HTML | 编辑 off 网址 | 辅助
正文 498字数 495,965阅读
页面中的登录按钮与其它两个输入框虽然给设置同样的样式，但登录按钮却没有被撑起来。原由：
input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, buttonRun code
Cut to clipboard
这些元素的box-sizing属性被浏览器默认设置为border-box;
元素的box-sizing被设置成border-box时，它的内边距和边框都被包含到了width和height里面，就是说它的width和height决定了盒子的高度和宽度。
所以在#loginBtn中添加一条样式
box-sizing: content-box;Run code
Cut to clipboard
css
button{
box-sizing: content-box;
}Run code
Cut to clipboard
（支付宝）给作者钱财以资鼓励 （微信）→
有过 2 条评论 »
overflow:visible ;
<style type="text/css">
body,div,ul,li,img{margin:0;padding:0}
img{border:0}
li{list-style:none}
body{text-align:center}
#main{margin:0 auto;padding:20px 0;width:500px;text-align:left}
#list{}
.item{position:relative;padding:5px 0;border-bottom:1px solid #CCC; zoom:1;}
.face{position:absolute;left:0;top:0;}
.face a{display:block;margin:5px 0 0;padding:2px;border:1px solid #CCC;text-align:center}
.face a:hover{border-color:#03F}
.face img{width:50px;height:50px}
.content{padding:0 0 0 65px;height:70px}
</style>
div代码：
<div id="main">
<ul id="list">
<li class="item">
<div class="face"><a href="http://hi.baidu.com/valeforge">图片</a></div>
<div class="content">123</div>
</li>
<li class="item">
<div class="face"><a href="http://hi.baidu.com/valeforge">图片</a></div>
<div class="content">123</div>
</li>
<li class="item">
<div class="face"><a href="http://hi.baidu.com/valeforge">图片</a></div>
<div class="content">123</div>
</li>
<li class="item">
<div class="face"><a href="http://hi.baidu.com/valeforge">图片</a></div>
<div class="content">123</div>
</li>
</ul>
</div>
注意,当加上padding后,border-bottom消失了
解决办法:
.item{position:relative;padding:5px 0;border-bottom:1px solid #CCC;zoom:1}
使用zoom:1。这个zoom是专门为解决ie6 bug而生的。
或:
.item{position:relative;padding:5px 0;border-bottom:1px solid #CCC;_height:1%}
情况：IE6/IE7中给某元素设置来margin属性，但是无效.
原因：设置margin属性的元素父级的haslayout没有被触发，不能对自己以及子孙的内容进行大小计算和组织，导致margin失效；
解决方法：触发该元素的父级的haslayout，给父级元素（假设是.parent）加:
.parent{
height:auto !important; //现代浏览器自适应
height:1%; //IE6、IE7触发haslayout
overflow:hidden; //现代浏览器
}
在某些情况下也可以使用zoom:1;去触发IE的haslayout。