0

Webページで3つのCSSボックスを水平に配置する必要があります。WebkitとMozillaボックスの向きと配置のプロパティを使用してそれを実行しようとしました。

-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;

このコードはMozillaFirefoxでうまく機能しますが、IEでは機能しません。ボックスを水平に並べる方法が必要です。コードはすべてのWebブラウザをサポートする必要があります。これを解決するのを手伝ってください。

4

1 に答える 1

0

すべてのWebブラウザーでサポートされているコードは、私たち全員が望んでいるものです：3

これまでのところ、主要なブラウザのほとんどはCSS3機能の一部を実装し始めており、より具体的には、IEはまだボックス指向機能を実装していないため、すべての主要なブラウザでそれをサポートすることはできません。ウェブブラウザー。提案として、レスポンシブデザインのプログレッシブサイトで作業している場合にのみ、CSS3の使用を検討する必要があります。それがあなたがしたいことであるならば、私はあなたを助けるためにmodernizrを使うことを提案します。

それ以外の場合は、テーブルレイアウトなど、inline試行錯誤された実際の方法を使用する必要があります。float

ベンチマークツールとしてbrowsershotsを使用して、サンプルJSFiddleのスクリーンショットをいくつかサンプリングし、さまざまなソリューションがどのように見えるかを確認しました。JSFiddleの例には次のものが含まれます

  • box-orient: horizontal;
  • float: left;
  • display: inline-block;
  • テーブルレイアウト

私はかなり最近のバージョンのブラウザショットのみを撮りましたが、あなた自身で比較することでより広範囲に及ぶことができます。

とにかく、これがJSFiddleで、これがスクリーンショットです 比較

ご覧のとおり、すべての主要なブラウザとそのバージョンの多くでサポートされていると思われるメソッドはとfloatですinline-block。テーブルも機能しますが、表示するデータがある場合にのみテーブルを使用することをお勧めします。これは、実際にはデザインやレイアウトを目的としたものではありません。

IE8とIE9の唯一の違いは、:nth-child()疑似を使用しているため背景色であり、実際には違いがないことに注意してください。また、IE7は何であるかを認識していないinline-blockため、プログレッシブサイトがある場合は、それをに変更してinlineください。

これらは、ボックスを水平方向に配置する（私が知っている）唯一のソリューションです。

于 2013-01-09T17:26:48.223 に答える