今天在項目中遇到radio和文字對齊問題(ie不明顯，火狐和google比較明顯)，在此記錄。
1.瀏覽器默認文字大小為14px，因而當文字字體為14px時radio和checkbox與文字對齊良好，如下所示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <input type="radio" value="1"> 1 <input type="radio" value="2"> 2 <input type="radio" value="3"> 3 <input type="radio" value="4"> 4 <input type="radio" value="5"> 5 <input type="radio" value="6"> >5
<br/> <input type="radio" value="1"> 學生 <input type="radio" value="2"> 老師 </body> </html>
輸出結果如下：
2.更改字體大小，對齊出現問題
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> body { font-size: 12px; } </style> </head> <body> <input type="radio" value="1"> 1 <input type="radio" value="2"> 2 <input type="radio" value="3"> 3 <input type="radio" value="4"> 4 <input type="radio" value="5"> 5 <input type="radio" value="6"> >5 <br/> <input type="radio" value="1"> 學生 <input type="radio" value="2"> 老師 </body> </html>
輸出結果如下：
若字體更改為10px或者更小對齊問題更加嚴重（當然字體大於14px也會出現類似問題）如下為字體為10px時
3.解決方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> body { font-size: 12px; } .inputStyle { vertical-align: text-bottom; margin-bottom: 2px; *margin-bottom: -2px; //兼容IE6，IE7 } </style> </head> <body> <input type="radio" value="1" class="inputStyle"> 1 <input type="radio" value="2" class="inputStyle"> 2 <input type="radio" value="3" class="inputStyle"> 3 <input type="radio" value="4" class="inputStyle"> 4 <input type="radio" value="5" class="inputStyle"> 5 <input type="radio" value="6" class="inputStyle"> >5 <br/> <br/> <input type="radio" value="1" class="inputStyle"> 學生 <input type="radio" value="2" class="inputStyle"> 老師 </body> </html>
效果如下：
4.其他方法
1)當文字12px左右大小時，單（復）選框設置height:13px; vertical-align:text-top; margin-top:0;效果如下：
單選框
復選框
2)
當文字12px左右大小時，單（復）選框設置height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;效果如下：
單選框
復選框
3）當文字12px左右大小時，單（復）選框設置height:14px; vertical-align:top;樣式后的表現，效果如下：
單選框
復選框
4）當文字12px左右大小時，單（復）選框設置vertical-align:middle; margin-top:-2px; margin-bottom:1px;效果如下：
單選框
復選框