html - IE9入力/ボタン要素の境界線の色の問題

Question

私が現在構築しているサイトでは、境界線の色<input>と<button>要素を正しく取得するのに問題があります。上、左、右の境界線を同じ色にし、下の境界線を別の色にしたいのですが。これら2つを除いて、他の要素でスタイリングを機能させることができます。この問題はIE9でのみ発生します。ヘルプや説明をいただければ幸いです。

私の問題の例：http： //jsfiddle.net/NyG3x/24/

Answer 1

ボーダーに個別に設定してみてください。

border: 1px solid #000;
border-bottom: 5px solid #CE181E

これは IE9 のバグのようです。下の境界線を 1px に設定すると、赤い境界線が正しく表示されます。ただし、値を 1px 以上に設定するとborder-color、 が他の の値に戻されるようborder-colorです。

アップデート

簡単な解決策は、 からスタイリングを削除し、abuttonの内側のテキストをラップして、 のスタイルを設定することです。これは、ここに示すように IE9 で機能します。buttondivdiv

Answer 2

これはより多くのマークアップであることは知っていますが、問題は確実に解決されます。

通常どおり 3 辺に 1 ピクセルの境界線を適用しますが、フォーム要素をタグ (たとえば div タグ) で囲み、div タグに 5 ピクセルの下部境界線を適用します。

HTML は次のようになります。

<form id="button-set-two">
    <div class="btn-wrapper">
        <input class="btn-style" type="submit" value="Btn1" />
    </div>
</form>

CSS は次のようになります。

#button-set-two .btn-style{
    border: 1px solid #000;
    border-bottom:none;
    color: #000;
    float: left;
    font-size: 1.6em;
    margin-right: 5px;
    padding: 2px 10px;
    background: none;
}

#button-set-two .btn-wrapper{
    border-bottom:5px solid #CE181E;
}