問題タブ [border-box]

私は、ボーダー ボックス ボックス モデルをクロス ブラウザーで使用できるようにする小さなコード スニペットを作成するのに忙しくしています。これまでのところ、基本的な機能は正常に機能していますが、マージンが機能しません。利用可能なスペースに適応する必要がありますが、コンソールは NaN を返し、それがどこから来たのかわかりません。

ここにフィドルがあります。

console.log には何も記録されず、その理由がわかりません。どんな助けでも大歓迎です。

私は最近、ボックスサイジングのプロパティをもう一度見ていました。ボーダーボックスの方が実際にはもっと適切なモデルだと思います。幅の計算で毎回それを考慮する必要なしに、ボックスにパディングと境界線を含めたいのですが、これは100％の幅を使用する場合には実際には不可能です。

だから問題は、落とし穴は何ですか？ボーダーボックスを使用しないのはなぜですか？

テキスト入力のあるフォームがあり、そのテキスト入力に css-property を指定しbox-sizing: border-box; width: 100%; padding-left: 28pxました。私が見つけることができるすべてのドキュメントによると、border-boxIE8はこの値をサポートするはずでbox-sizingあり（実際、IE8が quirks-mode で box-model をレンダリングする方法です）、パディングがあるにもかかわらず、この入力を常に100％幅に保つ必要があります左に。ただし、とにかくパディングを幅に追加するだけのようです。これはhttp://theater.dierclients.com/assets/htmlの紫色のサイドバーで確認できます。

なぜこれが起こっているのかについて何か考えはありますか？

ありがとう。

適用時に疑似要素が表示されないという奇妙な問題があります。

テスト ケース 1: http://jsfiddle.net/kGGuP/1/ - これは期待どおりに機能しました。ボックスをクリックするとコンテンツが表示され、「矢印」疑似要素も表示されます。

テスト ケース 2: http://jsfiddle.net/XGGg4/ - 追加しました

CSSに。ご覧のとおり、" arrow " 疑似要素はもう表示されません。これは、Firefox を除くすべてのブラウザーで発生します。

box-sizing:border-box; を削除する以外に、これに対する修正はありますか? ? 私は本当にこのルールを削除したくありません。

追加情報：

パラメータを持つ .toggle() と.slideToggle()だけがこの問題を抱えているようです。

パラメータなしで .toggle()と.fadeToggle()を使用すると、正常に動作します。

境界線とパディングで 100% の幅を維持しながらインラインで 2 つの要素を維持しようとしています。ボックスのサイズ変更を使用しようとしましたが、機能していません。なにが問題ですか？HTML:

CSS:

JSFiddle: http://jsfiddle.net/W7EJB/

フィドルを使用してテスト ケースをセットアップしました: http://jsfiddle.net/5M7X7/2/

いくつかのborder-boxレイアウトを変更するペット プロジェクトがあります。階層化されたブロック要素で、奇妙な (まだブラウザ間で一貫性のある) 動作が見られます。

例のように、3 つの div があります。最初の div は高さと幅が固定されており、その子は高さと幅が 100% で、両側に % パディングがあり、子は高さと幅が 100% です。

垂直パディングは、幅を使用して計算されています。これは意図的な癖border-boxですか？css を使用して、高さを使用して垂直方向のパディングを計算し、「期待どおりに」動作させるレイアウトのトリックはありますか?

JS の回避策も、最小のボックスのサイズを変更する別の方法も必要ありません。この特定のレイアウトの癖、なぜそれが起こっているのか、そしてそれを「動作させる」ための純粋でシンプルな css の方法があるかどうかに興味があります。

EDIT どうやら、使用しているボックスサイズに関係なく、パディング％は幅のパーセンテージとして計算されます。フロントエンド開発者としてこれまでにこれに遭遇したことは一度もありません。誰かが良い回避策を知っているなら、私はすべての耳です。

ありがとう！

box-sizing一部の開発者は、Web プロジェクト全体の一般的な方法として、グローバル セレクターで を使用していると読みました。これはベストプラクティスですか、それとも避けるべきですか? そしてパフォーマンスについて？

パーセンテージとマージンでボーダーボックスをどのように使用しますか? 例を次に示します。

div(.half) が画面の 50% を占めるようにしたい - div の周りの 5px のマージンは、試行するたびに 50% よりも広くなり、次の行に 2 番目のボックスを配置するたびにポーズ可能です。可能であれば、% ベースのマージンを避けるため。