問題タブ [box-sizing]

この例のパディングが 300px に等しくないのはなぜですか?

• ブラウザはどこで計算を行っているのでしょうか? 50% は何ですか?

• 以下の例では、コンテナ#Testが大きくなるにつれてパディングは実際には小さくなります。

• 実際には の幅を#Test動的にしたいのですが、この例のために修正しました。

• の 50% のパディングを取得するにはどうすればよい#Testですか?

注:私は解決策を探しているだけではなく、パディングがここでどのように機能しているかを理解しています。

ここで私のものとほぼ同じケースを見つけました。しかし、受け入れられた答えは私にはうまくいかないので、新しい質問をしてもいいと思います.

下の写真は、すべての主要なブラウザー (少なくとも IE8+、Firefox、および Chrome) で実現したいものです。TD 内に配置された INPUT は、親の幅と高さの両方を埋めます。

私の問題は、以下のコード スニペットを使用して Chrome で実行できないことです。前もって感謝します

更新: Chrome に関する私の問題の説明: よく見ると、上下の境界線に 1 ピクセルまたは 2 ピクセルのパディングがあります。これは、Windows 7 の Chrome バージョン 47.0.2526.111 m での私です (より明確に表示するには、新しいウィンドウで 開いてください)

UPDATE2: サンプルの大きな間違い。DIV は、ボックスのサイズ変更を使用せずに親をうまく適応させます。私が実際に望んでいるのは、INPUTが親にも適応することです。コードスニペットを再度更新しました。

ここcheckbox:checkedでトリックを使用したCSSメニューがあります

しかし、私の問題は、メニューが開いているときに、コンテンツが親の側面からオーバーフローすることです.sを流動的にして、次の行にラップアラウンドし、互いに押し合うようdivにするにはどうすればよいですか?div

私はフレキシブル ボックスを見てきましたが、これまで使用したことはありませんでしたが、これは適切な方法である可能性があると感じています。

私がやろうとしていることを示すJSFiddleを作成しました。

ありがとうございました ：）

編集

私はいくつかの実験を行ってきましたが、これはパディングとボックスのサイジングの魔法の組み合わせです - また、この便利な投稿に出くわしました => International box-sizing Awareness Day

編集

HTML:

CSS:

別のサイトの上に挿入したいアプリケーション サイトで、ブートストラップ 4.0 縮小 css を使用しています。

ファイルは次のとおりです: http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css

私が抱えている問題は、これらのスタイルのために、次のスタイリングがアプリケーションの背後にあるサイトに影響を与えていることです:

次のように、ラッピング div 内のすべてのみを対象とするように、CSS を変更しようとしました。

これはうまくいきませんでした - 何かアイデアはありますか?

レスポンシブ Web サイトを自分で構築する方法を学んでいます。画像の 1 つの上下の境界線にあるボックス サイズの境界線ボックスに問題があります。高さの異なる 2 列の画像があります。エッジを一致させたいのですが、各画像を区切るために数ピクセルの余白も必要です。

私の問題は、上と下の境界線でボックスサイズのボーダーボックスを使用すると、画像の端の外側にとどまり、次の画像を数ピクセル下に押し下げて、下端の隣の画像と一致しなくなることです。

先に進み、他の画像に境界線を追加する前に、この問題を修正したいと思います。私は CSS を初めて使用するので、何か明らかな間違いがあるのではないでしょうか?

境界線が画像の内側の端にとどまるようにするための助けをいただければ幸いです。

何が起こっているかのスクリーングラブを添付しました。 ボーダーボックス問題

When using box-sizing: border-box in Safari, there is a bug affecting the height of an img element when using height: 100% and a padding on the parent element.

See this fiddle and test it on Chrome/Firefox versus Safari to see the difference: https://jsfiddle.net/Arko/66b9bt02/1/

Here is the full code for reference:

HTML:

CSS:

With border-box sizing, the img height should be 20px (50px div height minus 2x 15px padding). This is correct in Chrome and Firefox. But Safari displays the image at 30px height.

• If we test this in the width instead of height, no issue.
• If we remove the padding or comment-out the border-box style, no issue.
• If we test this with an other block element such as a div instead of an img, no issue.

I found no other instance of this issue reported. Is this a new webkit bug to be reported? Or am I missing something?

(Tested in Safari 9.1.1 and Webkit Nightly 202811)

マージンとパディングによってボックスのサイズが変更されないようにしたいと思います。

私はすべてを試したと言いたいのですが、それが真実であるとは信じていません. div 内の画像を垂直方向に揃えようとしています。機能しているように見えましたが、画像の下よりも上にスペースがあることに気付きました。

いくつかのデバッグの後、それbox-sizing: border-boxが問題であることがわかりました。しかし、私は Bootstrap を使用しているため (そして、Bootstrap に依存しているようです)、変更できません。

以下の私のスニペットを参照してください。[ボックス サイズの切り替え] をクリックして、ボックス サイズのオンとオフを切り替えます。

皆さんが私を助けてくれることを願っています。