IE 和 Firefox 的布局问题，Chrome 工作正常

Question

布局仅在 Chrome 中运行良好。在 IE 和 Firefox 中，它无法正常工作，并且似乎都向左对齐，并且没有显示外包装。

我已按要求添加了 HTML 代码

/* CSS Document */

/* Reset */

body  {background-color:#6CF; }

/* Headings */

h1, h2, h3, h4, h5, h6 (font-weigth: bold;}

h1  { font-size: 35px; color:blue }
h2  { font-size: 25px; color:blue }
h3  { font-size: 15px;  color: red;}


/* Text Elements */

a               {   }
a.link          {   }
a.visited       {   }
a.active        {   }
a.focus         {   }
a.visited       {   }
a.visited       {   }


/* container */

#outerwrapper  { width: 960px; margin:0px auto; background-color:white;   }

#wrapper       { width: 900px; margin:0px auto; background-color:white;   }

#logo       {  margin: auto; text-align: center;  }

#navigation  {   text-align: center;  }
#navigation ul li { display:inline;  }
#navigation ul{ border-top: 1px #000 solid; border-bottom: 1px #000 solid; margin-bottom:20px; }
#navigation ul a{padding: 25px;}

#navigation a               { color: #33F;  }
#navigation a.link          { color: #33F;  }
#navigation a.visited       { color: #33F;  }
#navigation a.active        { color: #33F;  }
#navigation a.focus         { color: #33F;  }
#navigation a.visited       { color: #33F;  }
#navigation a.visited       { color: #33F;  }


#banner     {margin-bottom: 30px;    }

.content   { width: 900px; margin:auto; width: 900px; float:top; text-align:center }
.content-main { width: 500px; margin:auto; font-weight:bold; font-size:20px; text-align:left}  

#news  {width: 200px; float:right; padding:0px;}  


.date {font-weight: bold;}

.footer { clear:both; padding-top: 5px; padding-bottom: 5px;}
.footer-text {text-align:center}

#mainimages {margin-top: 20px; width: 700px; float: left;}


aboutimages {margin-top: 20px; width: 700px; float: left;}

.servicesimage {width: 200px; float:left; margin-top: 40px;  margin-left:20px;}

.servicelistleft {width: 300px; float:right; margin-top: 40px; }

.servicelistright {width: 300px; float:right; margin-top: 40px; margin-left:20px; }

.centertable { width: 500px; margin:auto;
    margin-top: 30px;}

HTML

> <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div id ="outerwrapper">
   <div id="wrapper">
            <div id="logo">
                <h1><img src="images/logo.jpg" width="248" height="153" alt="Conti Computer Shop" /></h1>
            </div>

            <div id="navigation">
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="services.html">SERVICES</a></li>
                <li><a href="contact.html">CONTACT</a></li>
        </ul>
            </div>
             <div id ="banner">
                <p><img src="images/test.jpg" width="900" height="202"/></p>
            </div>
            <div class ="content">
            <h1>Your One Stop Shop for all Computer Needs !</h1>

            <p class = "content-main">Welcome to our new website where you can find more about us, what Services we offer and contact us for more information. Rest Assured that our priority will always be to provide an excellent service at a good price. Thank You.            </p>
            </div>
            <div id = "news">
              <h2>Latest News</h2>
                <p class="date">April 20, 2012</p>
                <h3>Acer Laptops now available</h3>
                <p class="date">April 12, 2012</p>
                <h3>New Gadgets Just Arrived</h3>
                <p class="date">April 05, 2012</p>
                <h3>New HP Computers in stock</h3>
                <p class="date">April 02, 2012</p>
                <h3>Students discounts Launched</p>
            </div>
            <div id="mainimages">
                    <p>
                    <img src="images/sales.jpg" width="340" height="276" />
                    <img src="images/service.jpg" width="340" height="276" />
                    </p>

            </div>
     <div class ="footer">
            <p class="footer-text"> 2012 - Conti Design</p>
            </div>
  </div>
</div>
</body>
</html>

Answer 1

您的问题的根源可能是您的 CSS 和 HTML 均无效。通过位于以下位置的各自的 W3C 验证器运行它们：

http://validator.w3.org

http://jigsaw.w3.org/css-validator

出现错误。

对于您的 CSS：

11   h1, h2, h3, h4, h5  Parse Error [ (font-weigth: bold;} h1]
51   .content    Value Error : float top is not a float value : top

第一列是行号。对于 HTML，它的大多数投诉似乎都源于此：

 Line 44, Column 51: end tag for element "p" which is not open
                <h3>Students discounts Launched</p>

修复您的 HTML 和 CSS，重新验证，然后在这些浏览器中重试。

Answer 2

您应该检查以确保您的缩放设置在 Chrome 上是正确的。我想知道为什么布局在 ie 和 firefox 上很好，但不是 chrome，直到我检查并看到我在 chrome 上的缩放设置为 90%