0

我对此很陌生。这可能是基本的东西......我对 IE 有问题，它不会像 chrome 和 FF 那样呈现网页。这三个盒子，boxleft，boxcenter 和 boxright odes 没有出现在一行中。最后一个，box out 似乎就在 boxcenter 下方。我试图找到答案，但没有运气。这是html和css。非常欢迎任何形式的帮助。谢谢。

<!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;
}
4

1 回答 1

0

您将不得不编写 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 语句来为特定版本的 IE 设置 CSS。您必须调整每一个中的值并在 IE 中进行测试以使其看起来像您想要的那样。这不会影响它在其他浏览器中的显示方式。此外，您不必将所有页面的 CSS 都放在这些评论中，只是在 IE 中无法正确显示的内容。

于 2013-04-05T21:20:22.237 回答