18

IE9に角の丸いフィールドセットをレンダリングさせることはできませんが、他のブラウザではレンダリングします。誰かがこれにも遭遇しましたか？

4

9 に答える 9

23

これは、with を使用した場合にのみ発生します。使用<fieldset>し<legend>ない場合、コーナーは正常にレンダリングされます。

display:inline要素にordisplay:inline-blockを適用することでこのバグを修正できますが、設定して移動すること<legend>で元の位置に戻す必要があります。position:relative

凡例のスタイルがどのように見えるかに応じて (背景がある場合は同じように見えます - 背景がなくてもフィールドセットの境界線が文字の後ろに表示されます)、他の通常のブラウザーとほとんど同じように見えるようにすることができます。

于 2011-10-26T13:53:00.440 に答える
3

私も fieldset をフォーム以外にも使用していましたが、互換性に関する絶え間ないヒットとミスにより、それらをダンプするようになりました。フィールドセットをエミュレートする独自の CSS DIV クラスを作成することをお勧めします。CSS を使用すると、フィールドセットがどのように見えるかの正確なレプリカを取得でき、柔軟性と互換性が大幅に向上します

于 2012-10-27T19:27:56.080 に答える
3

IE9 の最新バージョンでの私の経験から、凡例を持つフィールドセットに半径を持たせることができません。私は IE9 の他のボーダーで問題を抱えていません。私はまだこれについて頭を悩ませています。

于 2011-02-28T03:11:58.073 に答える
1

最新のrcビルドでのみ機能し、IE9のベータ版では機能しません。


.class {
 border-radius-right-bottom: 15px;
}
于 2011-01-22T05:31:28.947 に答える
1

次のメタ タグを追加できます。

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
于 2011-11-15T21:33:12.737 に答える
1

legendを使用する場合、 IE11の下でも問題が あり、解決策は次のスレッドにあります。

フィールドセットの角を丸くする

 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/

于 2015-04-09T13:44:37.337 に答える
0

フィールドセットのレンダリングは、常にレンダリングの問題、特に印刷の問題をはらんでいます。それが機能しないことはほとんど驚くべきことではありません。

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

于 2011-01-05T03:43:53.650 に答える
0

IE9 で角丸 (CSS 3) を使用するには、これを HTML ヘッダーに追加する必要があります。

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

次に、通常どおり CSS を使用します。border-radius-right-bottom:15px;

私は同じ問題を抱えていましたが、これで修正されました。

于 2011-01-24T13:19:51.963 に答える
0

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 構造がある場合、これは機能しません。したがって、代わりに「フォーム」を CSS でフィールドセットの親 div に適用できます。

于 2015-08-02T18:47:22.403 に答える