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查看它，您将看到“过滤器”标题与正文分离。

你可以创建一个[JS斌演示]（http://jsbin.com/），再现问题，与相关的CSS和呈现的HTML？ – thirtydot

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

当然，在编辑下添加它。 – Set

答

如果你能扔了上的jsfiddle一个例子，将有很大的帮助，但我知道，IE6有水平间距，可以通过设置elemnts放大处理的问题，

.myhorzel{ 
    zoom:1; 
}

水平间距是现货，没有投诉。它的垂直间距给我带来了问题。 – Set

IE6中页面元素之间的额外空间

相关推荐