2012-05-28 30 views
0

我正在爲一個優秀的網站設計母版頁。我用螢火蟲來設計適當的CSS,但問題是當我在IE中打開頁面。對齊不一樣。IE的單頁對齊方式

問題是寬度,我已經爲div塊放置了餘量。

整個頁面如下。

<html> 
<head> 
<link src="Styles.css" type="text/css"/> 
<style type="text/css"> 
body{ 
    height:100%; 
    font-family: Tahoma; 
    width: 800px; 
    margin: auto; 
    color:#403e3e, 
    color:gray;font-size: 12pt; 
} 
#sections{ 
    width:100%; 
    background-color:#EFEFEF; 
    float:left; 
} 
#container{ 
    background-color:#FFFFFF; 
    float: left; 
} 
.sectionBlock{ 
    float:left; 
    width:30%; 
    border:0px dotted red; 
    padding: 10px; 
} 
h3{ 
    color:#990033; 
    font-family:Maiandra GD; 
    margin:9px; 
} 
#info{ 
    float:left; 
} 
.secHead{ 
    font-size:20pt; 
    font-family:Maiandra GD; 
    color:#990033; 
    margin-bottom:2px; 
} 
.secDescription{ font-size:10pt;} 
a{ color:#990033;} 
#navigation ul{ 
    background-image: url("img/bar.jpg"); 
    margin: 0; 
    height:32px; 
    padding-top: 8px; 
} 
#navigation ul li{display:inline;padding:20px; font-size:16px;color:#302e2e;} 
#footer {background-color:#E01B6A;} 
#footer .footerText{margin:auto;width:100%;width: 340px;} 

</style> 
</head> 

<body> 
    <div id="header"> 

    </div> 
    <div id="navigation"> 

     <ul> 
     <li>Home</li> 
     <li>Application Tracker</li>  
     <li>Insurance Policy downloads</li>  
     <li>Parner Login</li> 
     <li>SiteMap</li>  
     </ul> 
    </div> 
    <div id="container"> 
     <div id="intro"> 
     <h3>How can we help you? </h3> 
     Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, 
     omnis voluptas assumenda est, omnis dolor repellendus. Rerum necessitatibus saepe eveniet. 
     <a href="#moreInfo">Find out more</a> 
     </div> 

     <div id="sections"> 
      <h3>Lorem Ipsum</h3> 
      <div class="sectionBlock"> 
       <div class="secHead"> Tenants 
       </div> 
       <div class="secDescription"> 
      Lorem ipsum dolor sit amet, consecteur adipiscing elt, sed do elusmod tempor.<br/> 
      <a href="#Tenants">Find out more</a> 
       </div> 
      </div> 

      <div class="sectionBlock"> 
       <div class="secHead">Landlords 
       </div> 
       <div class="secDescription"> 
       Excepteur sint occaecat cupidatat non proident, sunt in culpa elt, sed do elus mod tempor qui officia deserunt mollit anim id est laborum.<br/> 
       <a href="#Landlords">Find out more</a> 
       </div>    
      </div> 
      <div class="sectionBlock"> 
       <div class="secHead">Letting Agents 
       </div> 
       <div class="secDescription"> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa elt, sed do elus mod tempor qui officia deserunt mollit anim id est laborum.<br/> 
       <a href="#Letting Agents">Find out more</a> 
       </div>    
      </div>  

     </div> 
     <div id="info"> 
     Maras is an independent company specialising in supplying services to the residential lettings industry. If you are an applicant, 
      letting agent or landlord Maras is here to help you. Maras Group is directly authorised and regulated by the Financial Services 
      Authority for general insurance activities. 
     <ul> 
      <li>Providers of services to the letting industry for more than 15 years. </li> 
      <li>Over 250,000 references processed per annum. </li> 
      <li>Over 1.5 Million telephone calls processed per annum. </li> 
      <li>One of the largest providers of services to the lettings industry. </li> 
      <li>Real value for money products and services. </li> 
     </ul> 
     </div> 

    </div> 
    <div id="footer"> <div class="footerText">Copyright [email protected], maras. All Rights Reserved.</div></div> 
</body> 

</html> 

任何人都可以建議樣式更改,以便它應該在所有瀏覽器中看起來相同的視圖?

+0

哪個版本的IE瀏覽器? –

+0

@馬拉斯,謝謝。請使用IE-8/9。 –

+0

嗨馬雷克Musielak,謝謝..! –

回答

1

我在頁面的內容中添加了一個包裝,並將「文本對齊:中心」設置爲正文(這有助於在IE中對齊元素)。

請參見下面的代碼,並告訴我它是否適合你

<html> 
<head> 
<link src="Styles.css" type="text/css"/> 
<style type="text/css"> 
body{ height:100%; font-family: Tahoma; color:#403e3e, color:gray;font-size: 12pt; text-align: center;} 
#wrapper { width: 800px; margin: 0 auto; text-align: left;} 
#sections{ width:100%; background-color:#EFEFEF; float:left; } 
#container{background-color:#FFFFFF; float: left;} 
.sectionBlock{ float:left; width:30%; border:0px dotted red; padding: 10px; } 
h3{ color:#990033; font-family:Maiandra GD; margin:9px; } 
#info{ float:left; } 
.secHead{ font-size:20pt; font-family:Maiandra GD; color:#990033; margin-bottom:2px; } 
.secDescription{ font-size:10pt;} 
a{ color:#990033;} 
#navigation ul{ background-image: url("img/bar.jpg"); margin: 0; height:32px; padding-top: 8px; padding-left:40px;} 
#navigation ul li{display:inline;padding:20px; font-size:16px;color:#302e2e;} 
#footer {background-color:#E01B6A; text-align: center;} 
#footer .footerText{margin:auto;width:100%;width: 340px;} 
</style> 
</head> 

<body> 
    <div id="wrapper"> 
     <div id="header"> 
     </div> 
     <div id="navigation"> 
      <ul> 
      <li>Home</li> 
      <li>Application Tracker</li>  
      <li>Insurance Policy downloads</li>  
      <li>Parner Login</li> 
      <li>SiteMap</li>  
      </ul> 
     </div> 
     <div id="container"> 
      <div id="intro"> 
      <h3>How can we help you? </h3> 
      Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, 
      omnis voluptas assumenda est, omnis dolor repellendus. Rerum necessitatibus saepe eveniet. 
      <a href="#moreInfo">Find out more</a> 
      </div> 

      <div id="sections"> 
       <h3>Lorem Ipsum</h3> 
       <div class="sectionBlock"> 
        <div class="secHead"> Tenants 
        </div> 
        <div class="secDescription"> 
       Lorem ipsum dolor sit amet, consecteur adipiscing elt, sed do elusmod tempor.<br/> 
       <a href="#Tenants">Find out more</a> 
        </div> 
       </div> 

       <div class="sectionBlock"> 
        <div class="secHead">Landlords 
        </div> 
        <div class="secDescription"> 
        Excepteur sint occaecat cupidatat non proident, sunt in culpa elt, sed do elus mod tempor qui officia deserunt mollit anim id est laborum.<br/> 
        <a href="#Landlords">Find out more</a> 
        </div>    
       </div> 
       <div class="sectionBlock"> 
        <div class="secHead">Letting Agents 
        </div> 
        <div class="secDescription"> 
     Excepteur sint occaecat cupidatat non proident, sunt in culpa elt, sed do elus mod tempor qui officia deserunt mollit anim id est laborum.<br/> 
        <a href="#Letting Agents">Find out more</a> 
        </div>    
       </div>  

      </div> 
      <div id="info"> 
      Maras is an independent company specialising in supplying services to the residential lettings industry. If you are an applicant, 
       letting agent or landlord Maras is here to help you. Maras Group is directly authorised and regulated by the Financial Services 
       Authority for general insurance activities. 
      <ul> 
       <li>Providers of services to the letting industry for more than 15 years. </li> 
       <li>Over 250,000 references processed per annum. </li> 
       <li>Over 1.5 Million telephone calls processed per annum. </li> 
       <li>One of the largest providers of services to the lettings industry. </li> 
       <li>Real value for money products and services. </li> 
      </ul> 
      </div> 

     </div> 
     <div id="footer"> <div class="footerText">Copyright [email protected], maras. All Rights Reserved.</div></div> 
    </div> 
</body> 

</html> 
+0

+1。太奇妙了...!用幾行包裝魔術來理解所有讀者本來會更好:) –