私の問題は、firefox と chrome では、私の Web サイトは quirks モードでは問題なく表示されますが、IE では表示されないことです。ページの先頭に追加してそこから移動する必要があることを認識していますが、これを行うと、Web サイトはすべてのブラウザーで同じように見えますが、希望どおりには表示されません。
これがDOCTYPEを使用した私の Web サイトであり、これが quirksモードの私の Web サイトです (Chrome/Firefox で)
これは私の CSS に問題がありますか? 私はそれを検証しましたが、エラーは見つかりませんでした!
ここに私の CSS があります: http://www.biolonline.co.uk/mystyle.css
問題は (タグで正しく推測したように) Quirks Mode と呼ばれるものです。
Doctype なしでサイトを作成すると、ブラウザーはそのサイトを Quirks モードでレンダリングします。これは基本的に、ブラウザが古い Web サイトとの互換性のために古いブラウザのふりをするためのエミュレーション モードです。
これを簡単に解決する方法はありません: quirks モードで見栄えがよくなるようにサイトを設計した場合は、それが間違っているため、修正する必要があります。
互換モードのままにしておくことはオプションではありません。このモードでは、IE が他のすべてのユーザーに対して異なる方法でレンダリングするためです。あなたのサイトは、doctype の有無にかかわらず、他のブラウザーでは壊れて見えます。
悪いニュースをお詫び申し上げます。
quirks モードと標準モードの主な違いは「ボックス モデル」です。これは、ボックスの幅と高さに関してマージンと境界線がどのように扱われるかを定義します。quirks モードでは、マージンと境界線はボックスの内側にあるため、widthボックスが占めるスペース全体がとを両側にwidth追加します。これは明らかにページ レイアウトに大きな影響を与えます。他にも違いがありますが、それはあなたにとって最も問題を引き起こすものです.marginborder
'box-sizing'と呼ばれる CSS 機能があります。これにより、標準モードのままで、上記の 2 つのモード間でボックス モデルを切り替えることができます。
実際、これはあなたにとって完璧な解決策です。あなたがする必要があるのはbox-sizing:border-box;、すべての要素を CSS に入れるだけで (*セレクターを使用して)、問題を解決するだけです。
残念ながら、box-sizingより新しいバージョンの IE でのみサポートされています。IE6 または IE7 をサポートする必要がある場合は、運が悪いです。最下位のブラウザが IE8 の場合は、それを使用できます。これにより、互換モードのレイアウトの問題のほとんどが解決されます。それらのすべてではありませんが、それらのほとんどです。
それが役立つことを願っています。