我正在研究 CSS 和 HTML 以尝试理解位置和 float 。我已经能够毫无问题地成功创建布局结构。但是，我注意到当我在 IE 9 中使用兼容模式时，页面的外观发生了变化。在 H1 和页脚 div 中的填充方面尤其如此。我尝试将页脚元素和 float 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 限制新用户发布图片以防止垃圾邮件。
谢谢。
最佳答案
尝试将这一行添加到标题中:
<meta http-equiv="x-ua-compatible" content="ie=edge" />
它告诉 Internet Explorer 始终以支持的方式呈现。
关于css - float 元素和 div 在 IE 中显示不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12979286/