9

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

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

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

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

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

4

1 に答える 1

9

いいアイデアだと思います。実際、私は自分のWebサイトでも同じことを始めます。

ここでポールはそれを同じように使うことについて話します

http://paulirish.com/2012/box-sizing-border-box-ftw/

私たちのプロジェクトの1つ（本番環境にデプロイされ、月平均100万回以上の訪問）で* {box-sizing：border-box;}を使用して約1年になりますが、問題なく持ちこたえているようです。 。プロジェクトはIE8と9、およびFirefoxとChromeの最新バージョンでテストされており、問題はありません。すべてのjQuery（+ UI）オフセット計算とアニメーションは、インラインブロックとして表示した要素であっても、正常に実行されます。最近、モバイルデバイス（iPhone、iPad、Android）でプロジェクトのテストを開始しましたが、いずれのデバイスでもボックスのサイズ設定に問題はないため、問題なく動作しているようです。

IE7の問題を処理するのに役立つことがわかりました

https://github.com/Schepp/box-sizing-polyfill

于 2012-05-23T15:36:55.357 に答える