Question

以下是该方案：

我有一张边距为19px的桌子。下面我有一个包含一些字段集的表单。其中一个是浮动的。问题是，在IE7中，保证金底部没有获得完整的19px。我已经完成了我能想到的所有IE7 css / margin / float错误，并尝试过补救措施，但都没有成功。我一直在谷歌搜索一段时间，找不到任何有用的东西。

这是我尝试过的。

将表单或字段集包装在一个没有样式的div中。没有明显的变化。
Nixing桌子上的边缘底部，而是用div包裹它并给它一个19px的填充底部。没有明显的变化。
Nixing桌子上的边距底部并添加一个固定高度为19px的div。没有明显的变化。
在表格和字段集之间加以明确。

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

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

编辑：我还有IE7 Web开发人员工具栏和Firebug。两个浏览器的样式信息都表明它有一个底边：19px;但它显然不适用于IE7。

Answer 1

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

Answer 2

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

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

在我的案例中它解决了这个问题。

<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

您是否拥有有效的doctype？否则IE7呈现怪异模式，基本上是IE5.5

Answer 4

我把你在那里描述的内容放在一起，它正在为我呈现。你可能在某个地方有另一种风格会对你的表格或你的桌子产生影响。如果您还没有这样做，使用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 5

如果从表格下方的元素中移除浮动，是否会出现边距？

Answer 6

如果没有测试我肯定不知道，但尝试将它放在表格和字段集之间：

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

IE7 HTML / CSS边距底部错误

6 个答案: