- ol/ul标签内置padding-left，但是单位是px而不是em。例如，Chrome浏览器下是40px,由于使用的是px这个绝对单位,因此,如果列表中的font-size大小很小,则<li>元素的项目符号(如点或者数字)就会离<ul>/<ol>元素的左边缘距离很开,如果font-size比较大,则项目符号可能跑到<ul>/<ol>元素的外面.
- 根据作者的经验,当font-size为12px至14px时,22px是比较好的一个padding-left设定值,所有浏览器都可以正常显示,且非常贴近边缘。
ol,ul{
padding-left: 22px;
}
- 所有的表单元素都有内置padding(实际上这个很容易看到,特别是button)
- 所有浏览器<input>/<textarea>输入框内置padding;
- 所有浏览器<button>内置padding
- 部分浏览器<select>下拉内置padding,如Firefox,IE8及以上版本可以设置padding;
- 所有浏览器<radio>/<checkbox>单复选框无内置padding(这个有内置padding会很奇怪吧)
- <button>按钮元素的padding最难控制.
调整button标签的Padding
- chrome浏览器,直接设置padding为0即可.
- Firefox浏览器,在设置了padding为0之后,还是有左右的padding.这种时候可以试试用下面的CSS语句,应该就可以消除左右padding了
button::-moz-focus-inner{ padding:0}
- IE7浏览器下,文字如果变多,那么左右padding逐渐变大,需要进行如下设置,按钮的表现应该就可以符合预期.
button { overflow: visible; }
button的高度计算问题
如下面的代码:
button {
line-height: 20px;
padding: 10px;
border: none;
}
在Chrome浏览器下是预期的40px,然而Firefox浏览器下是莫名其妙的42px,在IE7浏览器下更是匪夷所思的45px.
因此在实际开发中,应当尽量少用原生button进行开发,而是使用a标签来进行模拟.
但是有个问题,就是在表单中,有时候按钮是自带交互行为的,这是a标签没有办法模拟的。于是可以用以下的既保留语义良好行为，同时UI效果兼容效果好的实现小技巧，那就是使用<label>元素,HTML和CSS代码如下:
//html代码
<button id="btn"></button>
<label for="btn">按钮</label>
//CSS代码
button#btn{
postion:absolute;
clip: rect(0 0 0 0);
}
label[for="btn"] {
display: inline-block;
line-height: 20px;
padding: 10px;
}
<label>元素的for属性值和<button>元素值的id值对应就可。此时，所有浏览器下的按钮高度都是40px，而且<button>元素的行为也都保留了，是非常不错的实践技巧。
