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上的缩放设置为90％

IE和FIrefox的布局问题，CHrome工作正常

2 个答案: