Chrome、Opera、Safariとは対照的に、IEとFFでdivの幅が大きく異なるのはなぜですか?

saveadullam.org/pages/media.html では、メインテキストセクションが正しく全幅をカバーしていますChrome、Safari、Operaで使用できます。しかし、IE7とFF3では、幅の2/3しかカバーしません。画像を参照してください。バイリンガルなテキストは、私が知っているのはタブーですが、ここで問題となっているのは、テーブルベースのレイアウトではなく、テーブル全体を保持するdivです

私は、IEにレンダリングの問題があることを知っていますが、ここでIEとFFは同じように動作しています。 (スタイルシートはここを参照してください)。

何が問題ですか?

(編集:FFでは解決されますが、IEでは解決されません)

enter image description here enter image description here

0

1 答え

ちょうど幅を取り除く:cssからの.mainBodyから70%。それはFFで動作します。

.mainBody {
    vertical-align: top;
}
2
追加された
Right-o、それはFFでのトリックでしたが、IEではありませんでした。 mainBodyクラスはwidth:70%の他の場所で必要とされているので、実際にはwidth:70%のない別のクラスのmainBodyMediaを作成しました。 WebKitで全幅でレンダリングされた理由についてのアイデアですか?とにかく、この問題はFFで解決されますが、なぜIE7にまだ存在するのか理解できますか?
追加された 著者 Joshua Fox,
FFのために解決される - IEのためではない。
追加された 著者 Joshua Fox,
ありがとう、ボリス。これは参考になります。
追加された 著者 Joshua Fox,
@Boris奇妙なことに、あなたが正しく言っているように、この新しいクラスの.mainBodyMedaはまだ70%の幅を持っていましたが、修正はFFの問題を解決しました。しかし、それを削除した後、問題は解決されます。
追加された 著者 Joshua Fox,
はい、問題は、1つのセルが1行にあり、セルが width:70%に設定されていることです。異なるUAのように見えます。もちろん、CSSの仕様は実際にはこの動作を定義していません。 .mainBodyMedia には 70%スタイルがあります。
追加された 著者 Boris Zbarsky,