padding 兼容性问题

• 50%

块级元素通过padding:50%可以实现正方形的效果，因为水平和垂直padding的百分比值都是相对于包含块的宽度决定的，常常用于移动端头图。

如果是内联元素使用padding:50%，必须配合font-size:0，因为使用inline元素的垂直padding会出现"幽灵空白节点"，也就是规范中"strut"。所以通过font-size:0使其尺寸为0。

• 表单

所有浏览器input/textarea/button都内置padding；部分浏览器select下拉内置padding，firefox、IE8+可以设置padding；除IE10-以外的其他浏览器，radio/checkbox单选复选框无内置padding，且无法设置padding。IE10-浏览器的radio/checkbox单选复选框有内置padding，且可以设置padding；除IE10-以外的其他浏览器，radio/checkbox单选复选框无内置border，且无法设置border。

• button兼容

1、在firefox浏览器中，设置padding:0，按钮左右两侧依然有padding，这时需要使用firefox自有样式。
button::-moz-focus-inner{padding:0;}

2、IE7-浏览器下文字越多，左右padding逐渐变大，设置overflow:visible可解决该问题。

3、button按钮的padding与高度计算不兼容。

button{
    line-height:20px;
    padding:10px;
    border:none;
}
//  结果为：
IE7: 45px
firefox:42px
chrome/IE8+:40px

可以使用label标签来实现类似的效果，然后把按钮button进行可访问性隐藏即可。
<button id="btn"></button>
<label for="btn">按钮</label>

label{
    display:inline-block;
    line-height:20px;
    padding:10px;
    border:none;
}

//  结果为：
IE7: 40px
firefox:40px
IE8+:40px
chrome:40px

• 下内边距缺失：firefox和IE8+浏览器在overflow:scroll或auto时，存在padding-bottom缺失现象。

.box{
    width: 100px;
    height: 100px;
    padding: 50px;
    background-color: pink;
    overflow:scroll;
}
.in{
    width: 100px;
    height: 200px;
    background-color: lightgreen;
}

<div class="box">
    <div class="in"></div>
</div>