今天項目中出現了一個checkbox不能對齊的問題，檢查良久，發現出現的原因是因為checkbox被設定了高度為24px導緻文字和checkbox不能對齊，做了幾次測試後總結如下:
1 checkbox 和radio兩個标簽的預設高寬都是13px，但是在Firefox和IE中 margin和padding的預設值不一樣，是以必須先統一設定margin和padding為0
2 checkbox 和radio如果被設定了高度，那麼高度越高，垂直居中的偏差就越大
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>垂直居中</title>
<style type="text/css">
label{height:13px;}
</style>
</head>
<body>
<table >
<tr>
<td height="50px ">
<input id="1" type="checkbox" style="margin:0px;padding:0px
" />
<label for="1">預設高度垂直居中</label>
</td>
</tr>
<tr>
<td height="50px ">
<input id="1" type="checkbox" style="height:48px;margin:0px;padding:0px
" />
<label for="1">設定高度垂直居中</label>
</td>
</tr>
</table>
</body>
</html>
![沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)