IE和FIrefox的佈局問題，CHrome工作正常

-2

只有在Chrome中佈局才能正常工作。在IE和Firefox中，它無法正常工作，並且似乎都與左側對齊，並且沒有顯示外部包裝。IE和FIrefox的佈局問題，CHrome工作正常

我已經添加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>

來源

2012-04-20 user1347219

您可以添加HTML，也許是[jsFiddle]（http：// jsfiddle .net /）例子？ – 0b10011 2012-04-20 18:40:23

你應該使用你的CSS提供一個html文檔或片段。另外，通過你的CSS和你的html並刪除任何對這個問題沒有貢獻的東西是很好的。通過消除這些脂肪，你將更有可能獲得幫助。這並不會讓我感到驚訝，通過這樣做，你可以自己找到並解決問題。 – 2012-04-20 18:41:44

什麼可能是你的問題的根源是雙方你的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，重新驗證，並在這些瀏覽器再試一次。

來源

2012-04-20 19:37:05

謝謝馬特，刪除11 h1，h2，h3，h4，h5解析錯誤[（font-weigth：bold;} h1]解決了這個問題，謝謝您提供驗證鏈接，！ – user1347219 2012-04-20 20:20:27

您應該檢查以確保您的縮放設置正確無誤。我想知道爲什麼佈局在ie和firefox上沒問題，但是沒有鍍鉻，直到我檢查並看到我在Chrome上的縮放設置爲90％

來源

2012-07-19 11:28:42 goonerify

IE和FIrefox的佈局問題，CHrome工作正常

回答

相關問題