radio 和checkbox與文字對齊問題

時間 2019-11-25

原文原文鏈接

今天在項目中遇到radio和文字對齊問題(ie不明顯，火狐和google比較明顯)，在此記錄。html

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.更改字體大小，對齊出現問題google

<!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>

輸出結果以下：spa

若字體更改成10px或者更小對齊問題更加嚴重（固然字體大於14px也會出現相似問題）以下爲字體爲10px時code

3.解決方法htm

<!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>