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

【问题标题】：Extra space between page elements in IE6IE6中页面元素之间的额外空间
【发布时间】：2011-08-20 05:27:08
【问题描述】：

不用说，我对现代浏览器没有任何问题。这是我的页面代码：

<!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
}

在 IE6 中，这些元素之间似乎有大约 10 到 15 像素的额外空间。我很想责怪 div 标签，因为我知道有一些 IE6 错误会导致这样的问题，因为 div 中有额外的空白，但额外的空间只发生在某些 div 标签之后，比如两个 subContainerSections 和横幅之后其中不包含 div。我尝试将所有边距设置为零，但这并不能解决问题。就好像有问题的元素的边距和边框之间有什么东西......

你们觉得呢？

编辑： 把我的 DOCTYPE 扔到那里澄清

这是我页面的一个非常精简的版本：link。如果您使用 IE6 查看它，您将看到“过滤器”标题与正文分离。

【问题讨论】：

您使用的是哪种 DOCTYPE？你可能在quirks mode。
您能否创建一个JS Bin demo 来重现该问题，并使用相关的 CSS 和呈现的 HTML？
没问题，在编辑下添加了。

标签： css jsf internet-explorer-6

【解决方案1】：

如果你能在 jsFiddle 上举一个例子，这会很有帮助，但我知道 IE6 存在水平间距问题，可以通过设置元素缩放来解决，

.myhorzel{
   zoom:1;
}

【讨论】：

水平间距恰到好处，没有任何抱怨。它的垂直间距给我带来了问题。