0

ヘッダーに入力要素を挿入すると、独特のスタイルの問題があるテーブルがあります。入力を正確に中央揃えにするわけではありません。代わりに、右側が 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 のフォーカス グローにも境界線が表示されます。オーバーライドするスタイルがわからない...

ここに画像の説明を入力

4

1 に答える 1