Question

我在div中遇到空白问题。我的两个div有无法解释的空白，但是第三个类似的没有。当我使用IE8的兼容模式时，空格会消失，因此我猜测它与CSS有关，但对于我的生活，我似乎无法看到它。

导致问题的页面位于http://www.infinitedreamers.co.uk/blog/

我已将其中一个div背景设为白色以显示我的意思。

页面的片段如下：

<div id="id_front_main">

  <div id="id_front_top">

   <div id="id_front_top_title">
    <h2>Latest Gallery Images</h2>
   </div><!--#id_front_top_title-->

   <table id="id_gallery_latest"><tr><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_Fae4.jpg" height="100" width="86" alt="Contemplation"/><p class="id_title">Contemplation</p></td><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_Fae6.jpg" height="100" width="100" alt="Emo Fae"/><p class="id_title">Emo Fae</p></td><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_IOTPM.jpg" height="100" width="88" alt="Invasion of the Saucer-Plushies"/><p class="id_title">Invasion of the Saucer-Plushies</p></td><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_StarPlushies.jpg" height="100" width="84" alt="Star Plushies"/><p class="id_title">Star Plushies</p></td></tr></table>
   <div id="id_front_top_meta">
   </div>

  </div><!--#id_front_top-->

  <div id="id_front_main_holder">

   <div id="id_front_left">
    <div id="id_front_left_title">
     <h2>3d Art Latest</h2>
    </div><!--#id_front_left_title-->

    <div class="id_latest_posts">
                <h3><a href="http://www.infinitedreamers.co.uk/blog/?p=1">Getting Started in 3d Art for free</a></h3>
      <span>
      <p>You want to create 3d art on the PC or Mac? This is a quick guide on how to achieve this for free.</p>
      </span>
         </div><!--id_latest_posts-->

    <div id="id_front_left_meta">
    </div>
   </div><!--#id_front_left-->

   <div id="id_front_right">
    <div id="id_front_right_title">
     <h2>Software Latest</h2>
    </div><!--#id_front_right_title-->

    <div class="id_latest_posts">
                <h3><a href="http://www.infinitedreamers.co.uk/blog/?p=87">Poser Files Database</a></h3>
      <p>Poser Files Database is designed to aid in the cataloging of content for Poser, DazStudio, Vue, and other similar 3D tools. It can be used simply as a way to find a particular file or to provide detailed information about all products in one location.</p>
           <h3><a href="http://www.infinitedreamers.co.uk/blog/?p=82">File Renamer</a></h3>
      <p>FileRenamer is a simple batch file renaming utility.</p>
           <h3><a href="http://www.infinitedreamers.co.uk/blog/?p=80">Database Documenter</a></h3>
      <p>Database Documenter generates easy-to-read and detailed documentation for SQL Server 2000/2005 databases with a few simple clicks.</p>
         </div><!--id_latest_posts-->

    <div id="id_front_right_meta">
    </div>
   </div><!--#id_front_right-->

  </div><!--#id_front_main_holder-->
 </div><!--#id_front_main-->


    <div class="clear"></div>

适用的CSS如下：

#id_front_main
{
 text-align: center;
 width: 100%;
} 
#id_front_top
{
 width: 100%;
 background: url(images/fcover.jpg);
 background-repeat: repeat-y;

} 
#id_front_top_title
{
 width: 100%;
 background: url(images/ftop.jpg);
 background-repeat: no-repeat;
 height: 70px;
}
#id_front_top_meta
{
 background: url(images/fmeta.jpg);
 height: 31px;
 padding-top: 4px;
}
#id_front_main_holder
{
 width: 100%;
 margin: 0 0 0 0;
 padding: 0 0 0 0;
}
#id_front_left
{
 width: 45%;
 float: left; 
 /*background: url(images/flcover.jpg);
 background-repeat: repeat-y;*/
 background: white;
 margin-bottom: 5px;
 margin-top: 10px;
 padding: 0 0 0 0;
} 
#id_front_right
{
 width: 45%;
 float: right; 
 background: url(images/flcover.jpg);
 background-repeat: repeat-y;
 margin-bottom: 5px;
 margin-top: 10px;
 padding: 0 0 0 0;
} 
#id_front_left_title, #id_front_right_title
{
 width: 100%;
 background: url(images/fltop.jpg);
 background-repeat: no-repeat;
 height: 70px;
}
#id_front_left_meta, #id_front_right_meta
{
 background: url(images/flmeta.jpg);
 height: 31px;
 padding-top: 4px;
}

#id_front_main h2, #id_front_left h2, #id_front_right h2 
{
 background: transparent;
 font: 24px Georgia,century gothic, Arial, sans-serif;
 font-weight:normal;
 padding-top: 10px;
 padding-bottom: 5px;
}
#id_front_left p, #id_front_right p
{
 padding: 0 10px 0 10px;
 text-align: left;
}

詹姆斯： - ）

Answer 1

空白是由框中h2的上边距引起的。要解决它：

#id_front_main h2, #id_front_left h2, #id_front_right h2 {
    ...
    margin-top: 0;
}

在不同浏览器中查看您的网站时，重置您正在使用的样式始终是一个好主意，以避免出现这些问题。有标准的重置样式表可以帮助您：

http://meyerweb.com/eric/tools/css/reset/

Answer 2

即使我们遇到了类似的问题。

如果您一次显示一个div，则可以使用以下解决方案：

document.getElementById('myDiv').style.display = 'none';

到div的大小比显示的当前div大。

这非常适用于IE10 webkit，Chrome Webkit和Safari Webkit。

干杯， ANKIT

DIV中出现意外的空白

2 个答案: