問題タブ [border-box]

ボックスモデルがあるのに対し、ボックスモデルが<input type="submit"/>あることに気付きました。この動作は、IE8 および FF に存在します。残念ながら、これにより、均等なサイズの入力にこのスタイルを適用できなくなります。border-box<input type="text"/>content-box

これは IE と FF による正しい動作ですか? そして、この問題を回避するクロスブラウザの方法はありますか?

次の例を検討してください。

border-boxボックスのサイズ変更をサポートするブラウザでは、これは私が望むようにレンダリングされます:

正しいレンダリング http://img.skitch.com/20100522-c75mhdut2q32yc7u5r2tkft1n4.png

ただし、IE 6/7 では、これは次のようにレンダリングされます。

IE 6/7 レンダリング http://img.skitch.com/20100522-f5pkgnwwceaak3t8fqq2w16gfm.png

サイズをピクセル単位で設定せずに、IE 6/7 で他のブラウザと同じレンダリングを行うにはどうすればよいですか?

フォームには、1 つの選択フィールドと 2 つの入力フィールドがあります。これらの要素は垂直方向に配置されます。残念ながら、これらの要素の幅を等しくすることはできません。

これが私のコードです：

上記の例では、select 要素の最適な幅は 198 ピクセルまたは 199 ピクセルです (もちろん、193 ピクセルを試しましたが、違いは大きいです)。これらの要素の幅は同じではないため、さまざまなコンピューターやブラウザーの解像度に依存すると思います（違いは約1または2ピクセルだと思う場合があります）。これらの要素を div または table の行に設定しようとしましたが、役に立ちません。

Q: これらの要素の幅を正確に等しくするにはどうすればよいですか?

Safari、Chrome、Firefox などのブラウザーのユーザー エージェント スタイルシートは、ブラウザーの内部にあるものであり、直接変更することはできません (むしろ、スタイル プロパティをオーバーライドする必要があります)。

また、Mozilla を含むさまざまな Web サイトで、Webkit と Mozilla のbox-sizingプロパティのデフォルト値が「content-box」であるという印象を受けています。

さまざまなブラウザーで表示されるかなり単純なダミー ページでこれをテストしました。

私の問題は、本番アプリケーションの 2 つのページでデフォルト プロパティが異なり、その理由が分からないことです。

Web インスペクタまたはコンソールで、「border-box」のボックス サイズ設定プロパティが 1 つのページに表示されます。CSS セレクターinput:not([type="image"]), textareaに割り当てられます。

他のページでは、Web インスペクターまたはコンソールで box-sizing プロパティについて言及されていません。

特定のページのユーザー エージェント スタイルシートのボックス サイズの定義に直接影響を与える方法があるかどうかは誰にもわかりませんか? 多分これを行うライブラリがありますか？アプリケーションでprototype.jsとswfobject.jsを使用しています...

更新: Web アプリケーションのほぼすべてのページと、box-sizing プロパティでテストしたすべての「ダミー」ページで明確でない場合は、デフォルトの「content-box」値があります。なんらかの理由で、Web アプリケーションの特定のページで、ユーザー エージェント スタイルシート (ブラウザがデフォルトで使用するスタイルシート) がそのプロパティを「border-box」に設定していることを Web インスペクターに表示します。私は一生、これがなぜなのか理解できません。Firefox がそのプロパティのデフォルト値を変更する可能性のあるものを探しています。

を使用して小さな2ペインレイアウトを実行していdisplay:tableます。間隔（これも背景画像から）には、を使用しますpadding。私は子供たちがwidth:50%利用可能なスペースから正確に持っている必要があるので（親のパディングを考慮してdiv）、私はを使用しますbox-sizing:border-box。

これはOperaでは正常に機能しますが、Chromeではbox-sizing:border-boxまた-webkit-box-sizing:border-boxはは黙って無視されます。

問題を示すデモを作成しました。2つの赤いボックスは正方形で、青いボックスは幅と高さが200pxである必要があります：http：//jsfiddle.net/fabb/JKECK/

これがhtmlソースです：

そしてcss：

これはChromeのバグですか？それとも私は何か間違ったことをしていますか？

box-sizing：border-boxモデルを使用しています。最小幅のインラインブロック要素がインラインブロック要素（コンテナー）に含まれている場合、Internet Explorer9ではコンテナーの幅が広すぎます。FF10.0、Chrome 17.0、Opera 11.5、およびSafari5.1.2で期待どおりに機能します。 。

このjsfiddleを参照してください

ちなみに、min-widthではなくwidthが魅力のように機能します。

何か案は？

新しいWebサイトの開発を開始し、ブラウザが要素の幅と高さを計算するために使用するさまざまな方法（ボックスモデルのもの）に対処する準備をしています。どういうわけか、それは私の頭に浮かびました：私box-sizingがウェブサイトのすべての要素に適用した場合はどうなりますか？

私box-sizing: border-box;は、CSSにある最高のコマンドの1つであり、すべての制限があると信じている人の1人です。box-sizingただし、これらの同じ制限は、すべての要素に適用する必要があるかどうか疑問に思うものです。

もちろん、私のWebサイトはできるだけ多くのブラウザーと互換性がある必要があり、box-sizingIE7-について考えるときにいくつかの質問が作成されます。ただし、スケジュールが非常に厳しいため、この特定の問題を気にせずに数分余分に稼ぐことができれば素晴らしい場合があります。

とにかく、box-sizing:border-box;すべての要素に適用することは良い方針だと思いますか、それとも実際にそれを必要とする要素にのみ適用し続けるべきですか？

CSSで使用box-sizing: border-boxする場合、要素の合計幅はその「幅」の値で定義されると想定しています。したがって、分割の幅が20ピクセルで、右の境界線が10ピクセルであるとすると、20ピクセルのスペースを占めるボックスになり、その半分が右の境界線になります。ここのように、幅を10pxに設定し、右の境界線も設定するポイントまでプッシュします。

ボックスは赤い境界線のみで構成されます。幅を0pxに設定するとどうなりますか？全体が消えると思っていましたが、結果は上記とまったく同じです。

jsFiddleで表示

私の質問は、これが期待される動作であるかどうかです。私には矛盾しているようです。幅/高さだけを操作してボックスを消したいのですが。

あらすじ

私はラッパーを持っています、幅980px、パディング10x。中身は960px（ボーダーボックス）です。1つの要素、インラインブロック、幅760ピクセル、マージン右20ピクセル、および180ピクセルの別のインラインブロックがあります。これらは完全に一致する必要があります。ただし、要素の1つから2 pxを引くだけで、それらは親内に収まります。

インラインブロックの空白の問題を認識しており、常にその修正を使用しています。それでも、フロートを使用して2つのブロックをテストしましたが、同じ問題が発生しました。

CSS

HTML

これらの2つのピクセルはどこから来ていますか???!!!!!

box-sizing: border-box を使用すると、「閉じる」ボタンが切り取られます。これは、Zurb の Foundation 3 を使用する場合に特に当てはまります。

fancybox で問題を引き起こすと思われるコードは次のとおりです。

さて、作成者は計算を行うときにボーダーボックスを考慮する必要があるかもしれませんが、CSS で動作をオーバーライドする簡単な方法があるかどうか知りたいです。

これは、何が起こっているかを示す Fiddle です。閉じるボタンが切れる様子がわかります。http://jsfiddle.net/jonthomas/SxZuR/4/

また、github の問題は次のとおりです: https://github.com/fancyapps/fancyBox/issues/311