1

すべてのコードで申し訳ありません。それは本当にかなり基本的なページです。私は困惑しています。IE 8 では、このページが ff 14 とは異なるように表示されるようです。ff 14 では、テキストは "wrap" div の角に対して相対的に配置されているようです。ここにいくつかのイマガーの写真があります

ie8 http://i.imgur.com/TkgCc.jpg

ff14 http://i.imgur.com/ykdi9.jpg

さらに悪いことに、私のオフィス メイトは ie8 を使用していると言い、そのページは私の ff14 の例のように見えます。IE8をインストールしたばかりなので、クリーンインストールする必要があります。

直感的には ie8 のバージョンが正しいようです。つまり、テキストは、含まれている div に対して相対的に配置されると思うでしょう。

何か案は？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
<STYLE TYPE="text/css" MEDIA=screen>
body
{
    font-family: Georgia, serif;
}
#wrap
{
    width: 900px;
    margin: 30px auto;
}
#left-block
{
    float: left;
    height: 700px;
    width: 140px;
    background-color: #FFF;
    border: 2px solid #000;
    padding: 20px 0px 0px 20px;
    font-size:14px;
}
#left-block h1
{
    margin: 0 0 30px 0;
    padding: 0 0 0 0;
}
#left-block p
{
    font-weight:900;
}
#left-block li
{
    padding: 10px 0 0 0;
}
#header
{
    height: 120px;
    padding: 10px 0px 0px 0px;
}
#header h2
{
    font-size: 25px;
    margin: 0px 0px 0px 90px;
}
#header h1
{
    font-size: 65px;
    margin: 0px 0px 0px 220px;
}
#nav
{
    height: 30px;
    background-color: #000;
    margin-bottom: 10px;
}
#nav ul
{
    margin: 0;
    padding: 0px 0px 0px 190px;
}
#nav ul li
{
    list-style-type: none;
    display: inline;
}
#nav li a
{
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
}
#nav li a:hover { background: #666; }
#main
{
    height: 500px;
    background-color: #FFF;
    border-bottom: 3px solid #000 ;
}
#table
{
    margin: 20px 0px 0px 190px;
}
#footer
{
    text-align: center;
}
#footer h1
{
    font-size: 14px;
    margin: 20px 0 0 0;
}
</STYLE>
</head>
<body>
<div id="wrap">
    <div id="left-block">
        lb
    </div>
    <div id="right-block">
        <div id="header">
            <h2>hd</h2>
        </div>
        <div id="nav">
            nav
        </div>
        <div id="main">
            mn
            <div id="table">
                tb
            </div>
        </div>
        <div id="footer">
            ft
        </div>
    </div>
</div>
</body>
</html>
4

1 に答える 1

2

お使いのブラウザが互換モードに移行していると思われます。IE で F12 を押すと、右側の Web 開発エリアの上部にある灰色のバーにモードが表示されます。

これが起こらないようにするには、これをあなたの<head>エリアに追加してください:

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />

これにより、IE は使用可能な最新のモードを強制的に使用し、クライアント マシンにインストールされている場合は Chrome フレームをオンにします。

于 2012-08-08T16:10:58.847 に答える