在DIV中出現意外的空白

Question

我在div裏面發現空白問題。我的兩個divs有不明原因的空白，但第三個類似的沒有。當我使用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

即使我們面臨的類似問題。

如果要表示一次一個格，則可以使用下面的溶液：

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

到在尺寸上比所示的電流較大的div在div。

這對於IE10 webkit，Chrome Webkit和Safari Webkit非常有效。

乾杯， ANKIT