IE9 fieldset rounded corner

Question

他のブラウザとは異なり、IE9レンダリングに丸みのあるコーナーのフィールドセットを表示させることはできません。 誰もこれに遭遇しましたか？

Answer 1

フィールドセットレンダリングでは、レンダリング、特に印刷に関する問題が常に発生します。それがうまくいかないことは驚くことではありません。

標準の回避策は、別のコンテナとスタイルを追加することです。

Answer 2

その唯一IE9 のベータ版で作業AINTは、丸みを帯びた角を使用するようにIE9を取得するには

 

.class { 
border-radius-right-bottom: 15px; 
} 
 

Answer 3

を試してみてください、最新のrcのビルドでの作業（CSS 3）あなたはHTMLヘッダにこれを追加する必要があります。

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

その後、通常通りCSSを使用します。border-radius-right-bottom:15px;

を私は同じ問題を持っていた&これはそれを修正しました。

Answer 4

最新バージョンのIE9での私の経験から、凡例を持つフィールドセットを半径にすることはできません。私はIE9の他の国境には何の問題もありませんでしたが、css3 border-radiusはうまく動作し、ちょうどfieldset/ledgendです。私はまだこれ以上頭を傷つけている。

Answer 5

これは、<fieldset>と<legend>を使用した場合にのみ発生します。

あなたの<legend>要素にdisplay:inlineまたはdisplay:inline-blockを適用することによって、このバグを修正することができます - しかし、あなたはposition:relativeを設定し、それを周りに移動することにより、所定の位置に戻ってそれを再配置しなければならないよりも。

凡例のスタイリングがどのように見えるか（バックグラウンドは同じに見えますが、バックグラウンドなしでフィールドセットの境界線は文字の後ろに表示されます）、他の通常の場合と同じように見えるようにすることができますブラウザ。

Answer 6

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

これは、それを修正する方法です。

Answer 7

私はfieldsetを使用するだけでなく、単なるフォーム以上にも使用されましたが、互換性に関する絶え間ないヒットとミスが私にそれらをダンプさせました。フィールドセットをエミュレートする独自のCSS DIVクラスを作成する方がよいでしょう。 CSSを使用して、あなたはフィールドセットがどのように見えるかの正確なレプリカを得ることができますし、伝説 を使用している場合それはまだIE11下の問題であり、解決策は、このスレッドであるより多くの柔軟性と互換性

Answer 8

を持っています：

Rounded corners on a fieldset

fieldset { 
     margin:20px; 
     padding:0 10px 10px; 
     border:1px solid #666; 
     border-radius:8px; 
     box-shadow:0 0 10px #666; 
     padding-top:10px; 
} 

legend { 
     padding:2px 4px; 
     background:#fff; 
    } 


    fieldset > legend { 
     float:left; 
     margin-top:-20px; 
    } 
    fieldset > legend + * { 
     clear:both; 
    } 

http://www.456bereastreet.com/archive/201302/fieldset_legend_border-radius_and_box-shadow/

Answer 9

私はCSSファイルへのアクセスしか持っていなかったので、私はHTMLを変更できませんでしたので、IEのCSSでハックを作りました。

HTML構造だった：

<form> 
    <fieldset> 
     ...form content... 
    </fieldset> 
</form> 

全体CSSすべてのたブラウザ用とIEにはハック：もちろん

fieldset { 
    border-radius: 20px; 
    border: 1px #3D3D3D solid; 
} 
@media screen and (min-width:0\0) { 
    form { 
     border: 1px #3D3D3D solid; 
     border-radius: 20px; 
    } 
    fieldset { 
     border: 0 none; 
     margin-top: 1px; 
     margin-bottom: 1px; 
    } 
} 

を、あなたのサイトは別のHTML構造を持っている場合、これは動作しません。したがって、代わりに "フォーム"あなたのフィールドセットの親のdivにCSSで適用することができます。