Question

当我在IE中测试时，我的一个div表现得很奇怪。

以下是它的图片：

image http://img10.imageshack.us/img10/1395/mmmbme.png

奇怪的是我有height: 1px;。我不知道解决这个问题，我已经看了很长时间来解决这个问题。

这是我的CSS：

body{
    background-image: url(images/bakgrund.png);
    background-position: center;
    background-repeat: no-repeat;
}

#main{
    margin: 0px auto;
    width: 1870px;
}

#fb{
   position: absolute;
   height: 69px;
   width: 70px;
    margin-top: 505px;
    margin-left: 790px;
}

#nyheter{
    position: absolute;
    width: 460px;
    height: 210px;
    margin-top: 30px;
    margin-left: 500px;
}

#nyheter a{
    color: white;        
}

#nyheter a:hover{
    color: #c4c4c4;
}

h4{
    font-size: 20px;
    color: white;           
}

#nyheter p{
    margin-top: -25px;
}

h3{
    font-weight: 800;
    font-size: 20px;
}

#nyheter a:hover{
}

h2{
    color: white;
    font-family: "Bebas Neue";
    font-weight: 400;
    font-size: 50px;
    position: absolute;
}

#fb:hover
{

}

#twitter a{

}

#twitter{
   position: absolute;
   height: 69px;
   width: 70px;
   margin-top: 505;
   margin-left: 880px;
}

#banner {
    height: 200px;
    width: 1000px;
    margin-top: -10px;
    border: 1px solid transparent;
    background-image: url(banner.png);
    background-repeat: no-repeat;
    background-position: center;
    border: thin ridge #3a3a3a;
    margin: 0px auto;
    margin-left: 450px;
}

/*
#element1{
    position: relative;
    width: 1000px;
    height: 710px;
    margin: auto;
    background-color: black;
    filter:alpha(opacity=85);
    -moz-opacity:.85;
    opacity:.85;
    z-index: 1;
} */

#content1{
    width: 1000px;
    height: 610px;
    color: white;
    text-align: left;
    font-family: Makisupa;
    z-index: 1;
    border: thin ridge #3a3a3a;
    background-color: black;
    float: left;
    margin-top: -2px;
    margin-left: 450px;
}

#content2{
    width: 1000px;
    height: 100px;
    margin-left: 450px;
    position: relative;
    color: #a8a8a8;
    z-index: 2;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    margin-top: 0.4px;
    border: thin ridge #3a3a3a;
    background-color: black;
}

#textcontent{
    margin-left: 10px;
    margin-top: 10px;
    position: absolute;
}

#test:hover{
}

#test{

}

#copy{
    margin-left: 855px;
    margin-top: 60px;
    position: absolute;
}

#kodad{
    margin-left: 320px;
    position: absolute;
    margin-top: 70px;
    font-size: x-small;
}

a{
    text-decoration: none;
    color: #a8a8a8;
}

a:hover{
    color: white;
}

#textoperation{
    margin-top: 15px;
    margin-left: 20px;
}

#nyhet{
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    color: #bfbfbf;
    font-size: 14px;
    margin-left: 10px;
    margin-top: 50px; 
}

#huvudtext{
    margin-top: -10px;
}

#rubrik h3{
    font-size: 15px;
    font-weight: 400;
}

#textinled{
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    color: #bfbfbf;
    font-size: 15px;
    margin-left: 20px;
    margin-top: 130px;
}

#video{
    position: absolute;
    margin-left: 20px;
    margin-top: 295px;
}

h2{
    color: white;
    font-family: "Bebas Neue";
    font-weight: 400;
    font-size: 40px;
    position: absolute;
}

#nyhettext{
    position: absolute;
    margin-top: -23px;
    margin-left: 10px;
}

#huvudtext{

}

#underline{
    background-color: #3a3a3a;
    position: absolute;
    margin-top: 20px;
    margin-left: 10px;
    position: absolute;
    width: 220px;
    height: 3px;
}

#mitten{
    position: absolute;
    height: 570px;
    width: 3;
    background-color: #3a3a3a;
    margin-top: 10px;
    margin-left: 470px; 
}

/*
#element2{
    width: 1000px;
    height: 50px;
    margin: auto;
    margin-top: -671px;
    background-color: black;
    filter:alpha(opacity=85);
    -moz-opacity:.85;
    opacity:.85;
    z-index: 1;
}
*/
h1{
    color: white;
    font-family: "Bebas Neue";
    font-weight: 400;
    font-size: 50px;
    position: absolute;
}

#cssmenu{
    margin-top: 170px;
}

#cssmenu ul
{
    margin: 0;
    padding:0;
    list-style-type:none;
    width:auto;
    position:relative;
    display:block;
    height:30px;
    font-size:12px;
    font-weight:bold;
    background:transparent url(images/nav_bg.png) repeat-x top left;
    font-family:Arial, Helvetica, sans-serif;
    border-bottom:1px solid #000000;
    border-top:1px solid #000000;
}

#cssmenu li
{
    display:block;
    float:left;
    margin:0;
    padding:0;
}

#cssmenu li a
{
    display:block;
    float:left;
    color: white;
    text-decoration:none;
    font-weight:bold;
    padding:8px 20px 0 20px;
}

#cssmenu li a:hover
{   
    color: #c4c4c4;
    height:22px;
    background:transparent url(images/nav_bg.png) 0px -30px no-repeat;      
}


#cssmenu li.active a
{
    display:inline;
    height:22px;
    background:transparent url(images/nav_bg.png) 0px -30px no-repeat;  
    float:left;
    margin:0;
}

这是我的HTML代码：

<?xml version="1.0"?>
<! DOCTYPE html PUPLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1/-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title> Start </title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <!--[if gte IE 6]>
    <link rel="stylesheet" type="text/css" href="nycss.css" />
    <![endif]-->

    <![if !IE]>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <![endif]>
</head>
<body>


<div id="main">
    <div id="banner">
    <div id='cssmenu'>
    <ul>
    <li class='active '><a href='#'><span>Hem</span></a></li>
       <li><a href='#'><span>Information</span></a></li>
       <li><a href='#'><span>Om oss</span></a></li>
       <li><a href='#'><span>Anmäla</span></a></li>
       <li><a href='#'><span>Partners</span></a></li>
    </ul>
    </div>
    </div>


    <!--<div id="element1"></div> -->
    <div id="content1">
        <div id="background">
        </div>
        <div id="textoperation"><h1> Operation Pixel 19/02-13 </br>Folkets Hus i Karlshamn </h1></div>
        <div id="textinled">
            <p> Operation Pixel drivs av fem elever från JB Gymnasiet </br> i Karlshamn som ett projekt arbete. Vi som står för lanet </br> är Adam Erlandsson, Isak Risberg Jönsson, Jonatan Tjärnberg, </br>Victor Johansson och Lucas Mattsson.</p>
            <p> Lanet kostar 200 kr och vara mellan 2013.02.19-2013-02.21. </br> Du kan även förhandsboka och betala 150 kr istället.</br> Klicka på <a href="#"> Anmäla </a> för att boka din plats. </p>
        </div>
        <div id="video">
            <iframe width="410" height="280" src="http://www.youtube.com/embed/qP40Liau6z4" frameborder="0" allowfullscreen></iframe>
        </div>
        <div id="mitten"></div>
        <div id="nyheter">
            <div id="nyhettext"><h2> Nyheter </h2></div>
            <div id="underline"></div>
            <div id="nyhet">
            <h4>Hemsidan är på gång nu</h4><p>Adam Erlandsson håller just nu på att utveckla Operation Pixelshemsida. Hemsidan kommer vara klart inom 1-2 veckor.</br> Mer information kommer inom kort.</p> 
            <h4> Datum och lokal är bestämd </h4><p> Vi har nu hittat en lokal (folkets hus) och datumet är </br> satt mellan  19/02-13 21/02-13. Lorem ipsum dolor sit amet, consectetur </br>adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </br></br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate. </p>
            <h4> Projekt arbete </h4> <p>ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem ap
            eriam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </br></br> Nemo enim ipsam voluptatem quia volup
            tas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
            </br></br><h3><a href="#" id="nyhetlänk"> Läs alla nyheter </a></h3>
        </div>
        </div>
        <div id="fb">
            <a href="#"> <img src="images/fb.png"> </a>
        </div>
        <div id="twitter">
            <a href="#"> <img src="images/twitter.png"> </a>
        </div>
    </div>
    <div id="content2">
    <div id="textcontent">
        <div id="test"><a href="#"> Hem </a> </br></div>
        <div id="test"><a href="#"> Information </a> </br></div>
        <div id="test"><a href="#"> Om Oss </a> </br></div>
        <div id="test"><a href="#"> Anmäla </a> </br></div>
        <div id="test"><a href="#"> Partners </a></div>
    </div>
    <div id="kodad">
        <p> Code by Adam Erlandsson. Design by Adam Erlandsson & Victor Johansson </p>
    </div>
    <div id="copy">
        <p> © 2012 Operation Pixel </p>
    </div>

</div>
</div>
</body>
</html>

Answer 1

为安全起见，请在div中添加评论并设置其字体大小和行高。通常，所有视觉样式都应该由样式表表示，而不是由HTML标记表示。也许你最好添加一个CSS边框。

#nyhettext h2 {
    border-bottom: 3px solid #3a3a3a;
}

无论如何，以下内容应与您当前的方法一起使用。

HTML

<div id="underline"><!-- --></div>

CSS

#underline{
    background-color: #3a3a3a;
    position: absolute;
    margin-top: 20px;
    margin-left: 10px;
    /* position: absolute; */
    width: 220px;
    height: 3px;
    font-size: 1px;
    line-height: 1px;
}

还有一件事：所有这些元素都需要id吗？永远不应该有多个具有相同ID的元素（请参阅<div id="test">）。请考虑改为使用class。

div盒子的奇怪高度

1 个答案:

HTML

CSS