造型与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的问题

回答

相关问题