0

我正在为一个好的网站设计母版页。我已经使用 firebug 设计了适当的 css,但问题是当我在 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 2008@, maras. All Rights Reserved.</div></div>
</body>

</html>

任何人都可以建议更改样式以使其在所有浏览器中看起来都相同吗?

4

1 回答 1

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 2008@, maras. All Rights Reserved.</div></div>
    </div>
</body>

</html>
于 2012-05-28T13:39:25.540 回答