IE7 HTML/CSS margin-bottom bug

Question

这里是场景：

我有一个底部边距为 19 像素的表格。在此之下，我有一个包含一些字段集的表单。其中一个是向右浮动的。问题是在 IE7 中，margin-bottom 没有得到完整的 19px。我已经解决了我能想到的所有 IE7 css/margin/float 错误，并尝试了补救措施，但均未成功。我已经用谷歌搜索了一段时间，找不到任何有帮助的东西。

这是我尝试过的。

1. 将表单或字段集包装在无样式的 div 中。没有明显变化。
2. 在表格上取消边距底部，而是用 div 包裹它并为其提供 19 像素的 padding-bottom。没有明显变化。
3. 在表格上取消边距底部并添加一个固定高度为 19 像素的 div。没有明显变化。
4. 明确表格和字段集。

我知道还有一些我忘记了，但这些是我最近尝试过的。这发生在每个字段集上。

---

我正在使用重置样式表并有一个 xhtml 过渡文档类型。

编辑：我还有 IE7 Web 开发工具栏和 Firebug。两种浏览器的样式信息都说它有一个 margin-bottom: 19px;但它显然不适用于 IE7。

Answer 1

如果你有浮动和非浮动元素，确保它们之间的垂直空间跨浏览器的唯一可靠方法是在后续元素上填充顶部。

Answer 2

将margin-bottom: 19px; 替换为<div/> 与height: 19px。

删除 margin-bottom 的 CSS 样式并在 <table/> 和 <form/> 之间插入 <div/> 和 height: 19px

它解决了我的这个问题。

<table id="mytable">
    <tr>
        <th>Col 1</th>
        <th>Col 3</th>
        <th>Col 2</th>
    </tr>
    <tr>
        <td>Val 1</td>
        <td>Val 2</td>
        <td>Val 3</td>
    </tr>
</table>
<div style="height:19px;"></div>
<form method="post" action="test.html" id="myform">

Answer 3

您有有效的文档类型吗？否则 IE7 以 IE5.5 的 quirks 模式呈现

Answer 4

如果从表格下方的元素中去掉浮动，边距会出现吗？

Answer 5

我把你在那里描述的东西放在一起，它对我来说是正确的渲染。很可能你在某个地方有另一种风格，对你的表格或桌子有影响。如果您还没有这样做，使用reset.css 文件非常有用。如果您想查看哪些样式正在影响特定元素，firefox 的Web Developer Toolbar 有一个方便的样式信息命令，用于查看哪些样式（来自哪些文件/样式块/内联样式）正在应用于它。您可以通过按Ctrl+Shift+Y 或点击CSS -> View Style Information 来激活它

这是在 IE7 中对我有用的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Test</title>
            <style>
            #mytable {
                margin-bottom: 19px;
                border: solid green 1px;
            }
            
            #myform {
                border: solid red 1px; 
                overflow: hidden;
            }
            #floaty {
                float: right; 
                border: solid blue 1px;
            }
            </style>
        </head>
        <body>
            <table id="mytable">
                <th>Col 1</th>
                <th>Col 3</th>
                <th>Col 2</th>
                <tr>
                <td>Val 1</td>
                <td>Val 2</td>
                <td>Val 3</td>
                </tr>
            </table>
            <form method="post" action="test.html" id="myform">
                <fieldset id="floaty">
                    <label for="myinput">Caption:</label>
                    <input id="myinput" type="text" />
                </fieldset>
                <fieldset>
                    <p>Some example content</p>
                    <input type="checkbox" id="mycheckbox" />
                    <label for="mycheckbox">Click MEEEEE</label>
                </fieldset>
            </form>
        </body>
    </html>

Answer 6

如果不进行测试，我无法确定，但请尝试将其放在表格和字段集之间：

<br style="clear:both;" />