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

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

我知道在旧版本的IE中有bug，但是，我不知道是否有简单的东西，我在这里可以解决这个问题。

下面是我的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限制新用户将图像发布为垃圾邮件预防。

谢谢。

来源

2012-10-19 Aliasger

您是否试图在兼容模式下解决这些问题？你使用的CSS重置？ – Jawad

尝试增加此行头：

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

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

来源

2012-10-19 17:32:46

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

回答

相关问题