1

これは奇妙なCSSの問題であり、誰かが光を当ててくれることを望んでいます...

Twitter Bootstrap を使用していますが、非常に奇妙なフロート/クリア動作が見られます。メインコンテンツに右側のフロート div とフォーム水平があります。2 番目のフォーム フィールドは、正当な理由もなく、フローティング div の下でクリアされているようです。すべての HTML 要素と CSS 宣言を調べると、これが発生する原因となっているのは奇妙なプロパティです。それを単一の CSS 宣言に減らしました。

 .control-group::before, .form-horizontal .control-group::after {
   display: table;
   content: "";
   line-height: 0;
 }

具体的には、コンテンツ: ""; この 1 つの宣言を無効にすると、最初のフィールドが浮き上がり、すべてがうまくいきます。

デモンストレーションのためにJSフィドルを作成しました：http://jsfiddle.net/whiteatom/UJ89p/1/embedded/result/

ソースコード: http://jsfiddle.net/whiteatom/UJ89p/1/

これは設計によるものですか？W3仕様？これは一部のブラウザのみに固有のものですか (MacOS の Chrome、Safari、および FF でテスト済み)? Bootstrap チームは、この空の文字列プロパティを使用して何を達成しようとしていますか? ブートストラップ CSS ファイルを編集せずにオーバーライドできますか?

乾杯、

4

1 に答える 1

3

これは設計によるものですか？

はい。

W3仕様？

ここにあります。空の文字列は引き続きコンテンツと見なされます。ボックスの生成を完全に防ぎたい場合は、content: none代わりに使用する必要があります。Bootstrap ファイルを変更せずに、次のルールを独自のスタイルシートに追加するだけで済みます (content: ""宣言をオーバーライドします)。

/* Single-colon pseudo-elements for consistency with Bootstrap's IE8 compat */
.form-horizontal .control-group:before, .form-horizontal .control-group:after {
    content: none;
}

::after疑似要素が clearfix として使用されているため、float がクリアされていることに注意してください。clear宣言は、Bootstrap スタイルシートの別の場所にある別のルールにあります。

.form-horizontal .control-group:after {
    clear: both;
}

適切な宣言を追加することによりcontent: none、疑似要素がまったくレンダリングされなくなり、クリアランスが防止されます。

これは一部のブラウザのみに固有のものですか (MacOS の Chrome、Safari、および FF でテスト済み)? Bootstrap チームは、この空の文字列プロパティを使用して何を達成しようとしていますか?

Chrome、Safari、Firefox、および Opera の一部の非常に古いバージョンでは がサポートされておらずcontent: nonecontent: ""、 (空の文字列を使用して) コンテンツがないと誤って処理されます。サポートするバージョンcontent: noneは、IE8 以降と同様に、両方の値を正しく扱います。

空の文字列を使用することで、これらの古いブラウザーを説明しようとしていると推測しています。その場合は、content: none新しいバージョンで次のように正しい値が使用されるようにオーバーライドする必要があります。

.form-horizontal .control-group:before, .form-horizontal .control-group:after {
    display: table;
    content: "";
    content: none;
    line-height: 0;
}

もしそうなら — そしてそれが私の推測ですが — バグレポートが必要かもしれません.

于 2012-12-01T03:43:03.953 に答える