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

Css 浮动项目和div在IE中显示不同,css,internet-explorer,css-float,Css,Internet Explorer,Css Float,我正在研究CSS和HTML,试图理解位置和浮动。我已经能够成功地创建一个布局结构没有任何问题。然而,我注意到,当我在IE9中使用兼容模式时,页面的外观会发生变化。在H1和Footer div的填充方面尤其如此。我尝试将Footer元素和浮动div的div和margins设置为0,但没有成功 我知道旧版本的IE中存在漏洞,但是,我想知道是否有一些简单的东西可以解决这个问题 下面是我的HTML和CSS代码,以及来自IE9的图像 <%@ Page Language="C#" AutoEventW

我正在研究CSS和HTML,试图理解位置和浮动。我已经能够成功地创建一个布局结构没有任何问题。然而,我注意到,当我在IE9中使用兼容模式时,页面的外观会发生变化。在H1和Footer div的填充方面尤其如此。我尝试将Footer元素和浮动div的div和margins设置为0,但没有成功

我知道旧版本的IE中存在漏洞,但是,我想知道是否有一些简单的东西可以解决这个问题

下面是我的HTML和CSS代码,以及来自IE9的图像

<%@ 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>
我很感激有人给我指点

注意:我无法直接将图像发布到此邮件中-stackoverflow限制新用户发布图像以防止垃圾邮件


谢谢。

尝试将此行添加到标题:

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


它告诉internet explorer始终以受支持的方式进行渲染。

您是否试图在兼容模式下解决这些问题?你在使用CSS重置吗?
<meta http-equiv="x-ua-compatible" content="ie=edge" />