造型與IE的問題

我是新來的，所以。這可能是基本的東西...我有問題與IE瀏覽器，它不呈現網頁鉻和FF。這三個盒子，boxleft，boxcenter和boxright odes並不排列。最後一個，box out似乎就像在boxcenter下面一樣落下。我試圖找到答案，但沒有運氣。這裏是html和css。任何形式的幫助都是非常受歡迎的。謝謝。造型與IE的問題

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <link rel="stylesheet" type="text/css" href="mainstyle.css" /> 
     <!--[if IE 6]> 
     <link href="default_ie6.css" rel="stylesheet" type="text/css" /> 
     <![endif]--> 
    </head> 
    <body> 
     <div id="header" class="container"> 
     <div id="logo"> 
      <img src="layout/img.png" width="415" height="90" alt="img" /> 
     </div> 
     <!--END LOGO--> 
     <div id="mainmenu"> 
      <ul> 
      <li><a href="#">item 4</a></li> 
      <li><a href="#">item 3</a></li> 
      <li><a href="#">item 2</a></li> 
      <li><a href="#">item 1</a></li> 
      <ul> 
     </div> 
     <!--END MAIN MENU--> 
     </div> 
     <!--END HEADER--> 
     <div id="mainmiddle" class="container"></div> 
     <!--END MAIN-MIDDLE SECTION--> 
     <div id="bottomsection" class="container"> 
     <div id="bottomsectionName"> 
      <p>PRODUCTS:</p> 
     </div> 
     <!-- END BOTTOM SECTION NAME--> 
     <div id="boxholder"> 
      <div id="boxLeft"> 
       <div class="label"> 
        <p> 
        <a href="#">text 
        <a> 
        </p> 
       </div> 
       <!--END LABEL--> 
       <img src="layout/products.jpg" width="312" height="157" alt="" /> 
      </div> 
      <!--END BOX LEFT--> 
      <div id="boxRight"> 
      <div class="label"> 
      <p><a href="#">exclusive</a></p> 
      </div><!--END LABEL--> 
      <img src="layout/products.jpg" width="312" height="157" alt="" /> 
      </div><!--END BOX RIGHT--> 
      <div id="boxCenter"> 
       <div class="label"> 
        <p><a href="#">frost</a></p> 
       </div> 
       <!--END LABEL--> 
       <img src="layout/products.jpg" width="312" height="157" alt="" /> 
      </div> 
      <!--END BOX CENTER--> 
     </div> 
     <!--END BOX HOLDER--> 
     </div> 
     <!-- END BOTTOM SECTION--> 
     <div id="info" class="container"> 
     <div id="infoboxLeft" class="infotext"></div> 
     <!-- END INFO BOX LEFT--> 
     <div id="infoboxRight" class="infotext"> 
      <p>info:<br />Address: </p> 
     </div> 
     <!-- END INFO BOX RIGHT--> 
     </div> 
     <!--END INFO SECTION--> 
     <div id="footer"> 
     <p>Copyright: </p> 
     </div> 
     <!--END FOOTER--> 
    </body> 
</html>

CSS

html, body 
{ 
    height: 100%; 
} 
body 
{ 
    margin: 0; 
    padding: 0; 
} 
.container 
{ 
    margin: 0 auto; 
    width: 960px; 
} 
#header 
{ 
    background-color: #ffffff; 
    height: 180px; 
    overflow: hidden; 
} 
#logo 
{ 
    height: 100px; 
    margin: 0px, 0px, 0px, 0px; 
} 
#logo img 
{ 
    padding-top: 10px; 
} 
#mainmenu 
{ 
    height: 24px; 
    margin-top: 60px; 
} 
#mainmenu ul 
{ 
    list-style: none; 
} 
#mainmenu ul li 
{ 
    display: inline; 
    float: right; 
    font-family: Verdana; 
    font-size: 1.125em; 
    margin-top: -2px; 
    padding-left: 10px; 
    text-transform: uppercase; 
} 
#mainmenu ul li a 
{ 
    color: #c93159; 
    text-decoration: none; 
} 
#mainmenu ul li a:hover 
{ 
    text-decoration: none; 
} 
#mainmiddle 
{ 
    background: url(layout/norway.jpg) no-repeat; 
    height: 400px; 
} 
#bottomsection 
{ 
    height: 185px; 
    margin-top: 0px; 
    padding-top: 0px; 
} 
#bottomsectionName 
{ 
    height: 28px; 
    overflow: hidden; 
} 
#bottomsectionName p 
{ 
    color: 000000; 
    float: right; 
    font-family: Verdana; 
    font-size: 1.125em; 
    margin-top: 3px; 
} 
#boxholder 
{ 
    height: 157px; 
} 
.label 
{ 
    background-color: #c93159; 
    height: 24px; 
    margin-left: 104px; 
    margin-top: 109px; 
    position: absolute; 
    width: 208px; 
    z-index: 10; 
} 
.label p 
{ 
    color: #ffffff; 
    float: right; 
    font-family: Verdana; 
    font-size: 1.125em; 
    margin-right: 7px; 
    margin-top: 0px; 
} 
.label p a 
{ 
    color: #ffffff; 
    text-decoration: none; 
    text-transform: lowercase; 
} 
#boxLeft 
{ 
    float: left; 
    height: 157px; 
    width: 312px; 
} 
#boxCenter 
{ 
    height: 157px; 
    margin-left: 324px; 
    width: 312px; 
} 
#boxRight 
{ 
    float: right; 
    height: 157px; 
    width: 312px; 
} 
.infotext 
{ 
    font-family: Verdana; 
    font-size: 0.667em; 
} 
#info 
{ 
    height: 150px; 
    margin: 0px, 0px,0px,0px; 
    overflow: hidden; 
} 
#infoboxLeft 
{ 
    float: left; 
    height: 150px; 
    width: 480px; 
} 
#infoboxRight 
{ 
    float: right; 
    height: 150px; 
    width: 480px; 
} 
#infoboxRight p 
{ 
    float: right; 
    margin-right: 5px; 
    margin-top: 110px; 
    text-align: right; 
} 
#footer 
{ 
    overflow: hidden; 
    padding: 0px 0px 10px 0px; 
} 
#footer p 
{ 
    font-family: Verdana; 
    font-size: 0.667em; 
    text-align: center; 
}

來源

2013-04-05 youngster

你能格式化你的HTML代碼嗎？它不可讀。 – auicsc 2013-04-05 19:05:22

IE的哪個版本？ – Sean 2013-04-05 19:10:20

我猜這是IE6 – Huangism 2013-04-05 19:13:50

你將不得不寫IE特定的CSS。我的建議是使用條件註釋是這樣做的：

<!--[if IE]> 
.container 
{ 
margin: 0 auto; 
width: 960px; 
} 
#header 
{ 
background-color: #ffffff; 
height: 180px; 
overflow: hidden; 
} 
<![endif]--> 

<!--[if IE 6]> 
My page's CSS goes here 
<![endif]--> 

<!--[if gte IE 8]> 
My page's CSS goes here 
<![endif]--> 

<!--[if lt IE 9]> 
My page's CSS goes here 
<![endif]-->

您可以使用這些類型的if語句來設置你的CSS的IE瀏覽器的特定版本。你必須調整每個值並在IE中測試才能看到你想要的值。這不會影響它在其他瀏覽器中的顯示方式。您也不必將所有頁面的CSS放在這些註釋中，只是在IE中顯示不正確。

來源

2013-04-05 21:20:22 dukedevil294

謝謝。我莫名其妙地使它工作。這只是另一個需要修復的bug。看來IE8在我的情況下，以某種方式顯示更多的類，然後我指定。對代碼的引用是標籤類。它把我指定的那三個放在第四位。 – youngster 2013-04-05 21:59:47

造型與IE的問題

回答

相關問題