0

我正在研究 CSS 和 HTML 以尝试了解位置和浮动。我已经能够毫无问题地成功创建布局结构。但是，我注意到当我在 IE 9 中使用兼容模式时，页面的外观会发生变化。在 H1 和页脚 div 中的填充方面尤其如此。我尝试将页脚元素和浮动 div 的 div 和边距设置为 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" />

它告诉 Internet Explorer 始终以受支持的方式呈现。

于 2012-10-19T17:32:46.937 回答