IE6中頁面元素之間的額外空間

毫無疑問，我對現代瀏覽器沒有任何問題。這裏是我的網頁代碼：IE6中頁面元素之間的額外空間

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
     <body onload="initializeWidgets();"> 
     <!-- ### Banner ### --> 
     <jsp:include page="part_banner.jsp"></jsp:include> 

     <!-- Extra space occurs here... --> 

     <!-- ### Filters and Table ### --> 
     <div class="G_overallContainer"> 
      <div class="G_subContainer"> 
       <div class="G_subContainerSection"> 
        <h:outputText value="Filtering Options" styleClass="G_subContainerSectionHeader"/> 

        <!-- ...here... --> 

        <!-- ### Filter bar ### --> 
        <jsp:include page="part_filters.jsp"></jsp:include></div> 

        <!-- ...here... --> 

       <div class="G_subContainerSection"> 
        <h:form id="tableForm"> 
         <div class="table"> 
         <h:dataTable value="#{tableDataBean.data}" var="data" 
           headerClass="tableHeaders" 
           rowClasses="oddRow,evenRow">              

         </h:dataTable></div> 

         <!-- ...and somewhere after here --> 

        </h:form></div></div> 
      <h:messages layout="table" style="color:red;" showSummary="true" showDetail="false"/></div> 
    </body> 
    </f:view> 
    </html>

這裏是我的嵌套的div容器CSS：

body { 
     margin:0px; 
     border:none; 
     padding:0px; 
     width: 100%; 
} 

.G_overallContainer { 
     position: static; 
     display:block; 
     border:none; 
     padding: .25em; 
     border-width: 0; 
     border-style: none; 
     border-spacing: 0; 
} 

.G_subContainer { 
     display: block; 
     border: none; 
     padding: .25em; 
     margin:0; 
     border-style: none; 
     background-color: #0f2d65; 
} 

.G_subContainerSection { 
     display: block; 
     margin: .25em; 
     border:none; 
} 

.G_subContainerSectionHeader { 
     font-style: bold; 
     font-family: Verdana, Arial, Helvetica, sans-serif; 
     font-size: 11px; 
     display: block; 
     padding: .5em; 
     background: url(../image/steel-blue.png) repeat-x; 
     color: #000000 
}

它看起來像有大約10至15像素的額外空間在每個IE6這些元素之間。我很想指責div標籤，因爲我知道有一些IE6 bug會導致類似這樣的問題，因爲div內有額外的空白區域，但額外的空間只發生在特定的div標籤（如兩個subContainerSections）之後並且在橫幅其中不包含div。我嘗試將所有邊距設置爲零，但這並不能解決問題。它就好像有一些東西在邊緣和有問題的元素之間......

你們認爲什麼？

編輯： 把我的DOCTYPE那裏澄清

這裏是一個非常砍下我的網頁版本：link。如果您使用IE6查看它，您將看到「過濾器」標題與正文分離。

來源

2011-08-19 Set

你可以創建一個[JS斌演示]（http://jsbin.com/），再現問題，與相關的CSS和呈現的HTML？ – thirtydot

您正在使用哪種DOCTYPE？你可能在[怪癖模式]（http://en.wikipedia.org/wiki/Quirks_mode）。 –

當然，在編輯下添加它。 – Set

如果你能扔了上的jsfiddle一個例子，將有很大的幫助，但我知道，IE6有水平間距，可以通過設置elemnts放大處理的問題，

.myhorzel{ 
    zoom:1; 
}

來源

2011-08-19 20:49:01 Andrew

水平間距是現貨，沒有投訴。它的垂直間距給我帶來了問題。 – Set

IE6中頁面元素之間的額外空間

回答

相關問題