0

重複の可能性:
IE9 Float with Overflow:Hidden およびテーブル幅 100% が正しく表示されない

私がデザインしている Web ページは、Chrome に比べて IE9 では押しつぶされています。フォントだけでなく、ページの幅などすべてです。レイアウトは同じです。他のいくつかのサイトを見ましたが、どちらのブラウザでも同じように見えます。したがって、ブラウザの設定の問題ではないと思います。どちらのブラウザも 100% ズームに設定されています。ページの CSS で width と font-size を指定します。そして、ブラウザで Inspect 要素を確認すると、実際には両方とも、Times New Roman 15px であり、幅が 900px であることがわかります。しかし、これが両方に当てはまるわけではありません。私はローカルホストで実行しています。

これを修正して、何のために設計しているのかを知るにはどうすればよいですか?

編集：

ヘッダー内（現在）：

<!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />

CSS:

 body{font-family:"Times New Roman";font-size:15px} 
.container{width: 900px; height:100%; margin-left:auto; margin-right:auto;  overflow: hidden; min-height: 700px;}
.header{padding:30px;}
.naviagte{}
.left_column{float:left; width:100px; padding-bottom: 100000px; margin-bottom: -100000px; }
.main_body{float:left; width:700px; min-height: 700px; padding-bottom: 100000px; margin-bottom: -100000px;}
.right_column{float:left; background:green;width:100px; padding-bottom: 100000px; margin-bottom: -100000px;}
.footer{}
.clear{clear:both}

HTML:

<div class = "container">
    <div class = "header">My website and stuff</div>
    <div class = "navigate">
      stuff here
    </div>
    <div class = "left_column">&nbsp;</div>
    <div class = "main_body">
       stuff here
    </div>
    <div class = "right_column">&nbsp;</div>
    <div class = "clear"></div>
    <div class = "footer">&nbsp;</div>
</div>
4

1 に答える 1

0

これは通常、ヘッダーの不良が原因です。これを試してください：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

2 つの設定に注意してください。2番目の設定は必ずしも必要ではありませんが、いくつかのエッジ ケース (フロート動作など) では、IE が他のブラウザーのように動作するようになります。

編集 ：

padding や margin に 100000px のような値を使用しないでください! これにより、整数オーバーフロー エラーが発生する可能性があります。あなたの問題はおそらくここにあります。

于 2012-10-14T15:52:21.537 に答える