[英]CSS div width in IE8
我对html和css很新,所以请随意批评你在下面的代码中看到的任何不良做法......
我正在尝试创建一个800像素的居中列,横幅将调整为800像素。 在chrome或firefox中查看此页面时,它看起来很棒。 当我在IE8中查看它的字体是巨大的时,横幅的右侧一直到底部有一个巨大的空白点,无论我在做什么,“容器”的大小都不会改变。 css文件。
CSS:
body {
font-family: Arial;
font-size: small;
background-color: #FFFFFF;
background-image: url(../images/victorianBackground.jpg);
background-position: top;
background-repeat: repeat;
color: #000000;
}
#container {
margin: -10 auto;
background-color: #D3CDBA;
text-align: left;
}
html>body #container {
width: 800px;
min-height:800px;
padding: 0 0px;
}
#banner {
width:800px;
}
#banner img {
width:800px;
padding:45 0px;
}
#content {
width:500px;
padding: 15px;
background-color: transparent;
}
/* Navigation */
#navigation ul {
list-style-type: none;
width: 800px;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
background-color: #D3CDBA;
}
#navigation li:hover {
float: left;
color: #4676A4;
background-color: #D3CDBA;
}
#navigation a {
font-weight: bold;
text-decoration: none;
color: #000000;
display: block;
padding: 5px;
}
#navigation a:hover {
font-weight: bold;
text-decoration: none;
color: #992332;
}
#content a {
color:teal;
}
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Park Avenue Neighborhood Association</title>
<meta name="keywords" content="Park Avenue Neighborhood Association Syracuse New York"/>
<link rel="stylesheet" type="text/css" href="../styles/style1.css">
</head>
<body>
<div id="container">
<div id="banner">
<img src="../images/banner.jpg" id="banner">
<br/>
</div>
<div id="navigation">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="History.html">History</a></li>
<li><a href="Houses.html">Houses</a></li>
<li><a href="LocalBusiness.html">Local Business</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="Contacts.html">Contacts</a></li>
</ul>
</div>
<div id="content">
<h2>Content Header 1 </h2>
<p>Awesome Content </p>
<h2>Content Header 2 </h2>
<p>Awesome Content </p>
</div>
</body>
</div>
</html>
我在您的来源中看到了多个问题。 非详尽清单:
1)您需要一个doctype。 否则,浏览器将以非标准方式呈现项目。
例:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2)在</body>
标记之后有一个<div>
结尾。 这是无效的。
固定:
<p>Awesome Content </p>
</div>
</div>
</body>
</html>
3)您不需要<div id="banner">
的额外<br>
。
固定:
<div id="banner">
<img src="../images/banner.jpg" id="banner">
</div>
4)现在,如果您希望<div id="container">
居中并且宽度为800px,请尝试以下操作。
对css中的代码进行居中(替换现有代码):
body { text-align: center; }
#container {
text-align: left;
width: 800px;
margin: auto;
}
5)对于你的font-size
声明,你使用的是small
。 这将表现得不可预测。 相反,请考虑使用em
或px
作为字体大小。
em
字体大小:
body { font-size: 100%; line-height: 1.125em; }
#container { font-size: 0.875em; }
字体大小与px
:
body { font-size: 16px; line-height: 1.125em; }
#container { font-size: 12px; }
我看到的第一件事,你需要将它添加到HTML的第一行,以强制IE以标准模式呈现,而不是怪异模式:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
关于横幅中心,请尝试添加以下内容:
在体选择器中:
text-align:center;
横幅:
margin-right:auto; margin-left:auto;
关于字体大小尝试使用em或%大小。
除此之外,一次只解决一个问题,逐步微调细节。 一下子抛出所有东西只会造成混乱 - 它有可能无法按预期工作,但会让你感到沮丧。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.