Question

我正在研究CSS和HTML来尝试理解位置和浮点数。我已经能够成功创建一个布局结构而没有任何问题。但是，我注意到当我在IE 9中使用兼容模式时，页面的外观会发生变化。就H1和页脚div中的填充而言尤其如此。我尝试将div和margin设置为0为页脚元素以及浮动div，但没有运气。

我知道旧版本的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限制新用户将图片发布为垃圾邮件防护。

谢谢。

Answer 1

尝试将此行添加到标题中：

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

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

浮动项目和div在IE中显示不同

1 个答案: