26

「fieldset」タグがIEで丸みを帯びた角の境界線をレンダリングすることに気づきました(他のブラウザーでは四角くレンダリングされます)。

<fieldset>
         <legend>My legend</legend>
</fieldset>

しかし、フィールドセットにCSSスタイルを設定すると、丸みを帯びた角が消えます!!

誰もが理由を知っていますか?丸みを帯びた角を別の境界線の色で維持するにはどうすればよいですか?

[編集]:混乱して申し訳ありませんが、Firefox /他のブラウザで角を丸くする方法を尋ねません。IEで角を丸くし、別の境界線の色を付ける方法を知りたいです border-color:red; onフィールドセットは、ラウンドを正方形に変更します...)。

4

7 に答える 7

20

このサイトでは、フィールドセットの丸みを帯びた角とIE10に関する問題が修正されています。IE(悲しい顔)にはまだ問題があります。100%の時間動作するには、フロートする必要があります。

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;
  /* For better legibility against the box-shadow */
}
fieldset > legend {
  float: left;
  margin-top: -20px;
}
fieldset > legend + * {
  clear: both;
}
<fieldset>
  <legend>Legend</legend>
</fieldset>

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

于 2013-07-01T14:12:20.053 に答える
14

そのような理由はありません。ブラウザの動作が異なることは周知の事実です。

-moz-border-radius属性を調べましたか?

私は何かのようなものだと思います

fieldset {   
  -moz-border-radius:5px;  
  border-radius: 5px;  
  -webkit-border-radius: 5px; //edit :D
}  

FireFox / Mozillaで動作しますが、試してから久しぶりです:D

于 2009-06-02T15:30:40.053 に答える
9

一部のアイテム(ボタン、入力ボックス)は、デフォルトでシステムの視覚スタイルを使用しています。デフォルトのWindows XP / Vistaテーマでは、フィールドセットの角が丸くなっています。(たとえば、表示プロパティを見てください。)

たとえば、にスタイルを割り当てる<input />と、ホバー効果やグラデーションなども失われます。

于 2009-06-02T16:02:57.013 に答える
8

IEの境界線は、1)[パフォーマンス|パフォーマンス]で[ボタンのウィンドウで視覚的なスタイルを使用する]が有効になっている場合にのみ丸くなります。[視覚効果]タブ。率直に言って、「XPテーマ」を有効にしている場合は丸められますが、従来のWin2000の外観を使用している場合は、丸められません。

2番目の要件2)は、フィールドセットの「境界関連のCSSがない」ことです。border-color、border-style、またはborder-widthを割り当てると、「真円度」がなくなり、回避策はありません。入力(ボタンとフィールドの両方)、テキストボックス、および選択タグについても同じことが言えます。IEがレンダリングするコントロールのCSSテーマを検出しない場合は常に、「デフォルトのWindowsテーマ」をコントロールに適用します。

于 2009-08-27T11:25:25.327 に答える
0

FirefoxとSafariで機能するCSS3border-radiusプロパティを使用できます。

fieldset {
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}
于 2009-06-02T15:32:27.427 に答える
0

http://www.webteacher.ws/2010/02/27/style-a-fieldset-with-rounded-corners-using-css/

于 2012-10-03T12:39:08.070 に答える
-1
fieldset {   
  -moz-border-radius:5px;  
  border-radius: 5px;  
  -webkit-border-radius: 5px; //edit :D
}
于 2010-12-17T14:25:46.627 に答える