0

位置とフロートを理解するために、CSS と HTML に取り組んでいます。問題なくレイアウト構造を作成できました。ただし、IE 9 で互換モードを使用すると、ページの外観が変わることに気付きました。これは、H1 およびフッター div のパディングに関して特に当てはまります。フッター要素とフロート div の div と margins を 0 に設定しようとしましたが、うまくいきませんでした。

古いバージョンの IE にバグがあることは知っていますが、それを解決できる単純な何かがここに欠けているのではないかと思います。

以下は、私の HTML と CSS コード、および IE 9 の画像です。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Testing.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
        <div id="header">
        <h1>Header</h1>
        </div>
        <div id="leftnav">LeftNav</div>
        <div id="rightnav">RightNav</div>
        <div id="footer">Footer</div>
    </div>
    </form>
</body>
</html>

以下はCSSです：

#container
{
    width: 960px;
    margin: 0 auto;
    background-color: #FFFFCC;
    border: 1px solid black;
}


#leftnav
{
    float:left;
    width:160px;
    display:inline;
}

#rightnav
{
    float:left;
    display:inline;
    margin-left:5px;
}

#footer
{
    clear:both;
}

これについての指針に感謝します。

注: このメッセージに画像を直接投稿することはできませんでした。stackoverflow は、スパム防止のため、新規ユーザーによる画像の投稿を制限しています。

ありがとうございました。

4

1 に答える 1

0

次の行をヘッダーに追加してみてください。

<meta http-equiv="x-ua-compatible" content="ie=edge" />

これは、InternetExplorerに常にサポートされている方法でレンダリングするように指示します。

于 2012-10-19T17:32:46.937 に答える