IE8中的CSS div寬度

Question

我對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>

Answer 1

我在您的來源中看到了多個問題。 非詳盡清單：

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; }

Answer 2

我看到的第一件事，你需要將它添加到HTML的第一行，以強制IE以標准模式呈現，而不是怪異模式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

Answer 3

關於橫幅中心，請嘗試添加以下內容：

在體選擇器中：

text-align：center;

橫幅：

margin-right：auto; margin-left：auto;

關於字體大小嘗試使用em或％大小。

除此之外，一次只解決一個問題，逐步微調細節。 一下子拋出所有東西只會造成混亂 - 它有可能無法按預期工作，但會讓你感到沮喪。

IE8中的CSS div寬度

問題描述

3 個解決方案

解決方案1
8 已采納 2009-07-27 04:02:05

解決方案2
3 2009-07-27 03:17:07

解決方案3
2 2009-07-27 03:24:27

IE8中的CSS div寬度

問題描述

3 個解決方案

解決方案1 8 已采納 2009-07-27 04:02:05

解決方案2 3 2009-07-27 03:17:07

解決方案3 2 2009-07-27 03:24:27

解決方案1
8 已采納 2009-07-27 04:02:05

解決方案2
3 2009-07-27 03:17:07

解決方案3
2 2009-07-27 03:24:27