Question

我是新手。它可能是基本的东西......我有IE的问题，它不会将网页渲染为chrome和FF。那三个盒子，盒子，盒子中心和盒装颂歌不符合标准。最后一个，盒子似乎就像在盒子中心下方掉落一样。我试着找到答案，但没有运气。这是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;
}

Answer 1

你将不得不编写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中无法正确显示。

IE的样式问题

1 个答案: