一些有内置padding的标签

---

1. 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;
}

2. 所有的表单元素都有内置padding(实际上这个很容易看到,特别是button)

• 所有浏览器<input>/<textarea>输入框内置padding;
• 所有浏览器<button>内置padding
• 部分浏览器<select>下拉内置padding,如Firefox,IE8及以上版本可以设置padding;
• 所有浏览器<radio>/<checkbox>单复选框无内置padding(这个有内置padding会很奇怪吧)
• <button>按钮元素的padding最难控制.

调整button标签的Padding

---

1. chrome浏览器,直接设置padding为0即可.
2. Firefox浏览器,在设置了padding为0之后,还是有左右的padding.这种时候可以试试用下面的CSS语句,应该就可以消除左右padding了

button::-moz-focus-inner{ padding:0}

3. 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>元素的行为也都保留了，是非常不错的实践技巧。