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工作正常

回答

相关问题