ヘッダーに入力要素を挿入すると、独特のスタイルの問題があるテーブルがあります。入力を正確に中央揃えにするわけではありません。代わりに、右側が 2 ピクセルずれています。テーブルにいくつかの Twitter Bootstrap スタイルを適用していますが、問題の原因となっているものを見つけることができないため、それとは関係がないと思います。マークアップは次のとおりです。
<thead>
<tr>
<th scope="col" style="width: 5%;">
<a href="#">ID</a>
<input type="text" value="" class="grid-filter" id="id-filter">
</th>
...
これが問題の写真です(かなり拡大されています):
適用されるスタイルは次のとおりです。
th {
width: 15%;
a { display: block; }
input {
height: 15px;
line-height: 15px;
margin: 0;
padding: 5px 0;
width: 100%;
}
}
上の画像では、Firebug を使用しており、「ID」アンカーに注目しています。ご覧のとおり、アンカーは th の中央に正しく配置されていますが、何らかの理由で入力ボックスの右側に余分な 2 ピクセルがあります。どうしてこれなの?奇妙なことに、これは選択要素には影響せず、入力要素のみに影響します。
更新: 境界線とアウトラインを設定すると、Bootstrap のフォーカス グローにも境界線が表示されます。オーバーライドするスタイルがわからない...