11

这是场景：

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

这是我尝试过的。

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

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

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

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

4

6 回答 6

2

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

于 2011-04-11T02:39:40.907 回答
2

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

删除 CSS 样式并在and之间margin-bottom插入<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">
于 2012-11-07T10:13:08.750 回答
1

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

于 2008-08-21T03:01:45.683 回答
1

你有一个有效的文档类型吗？否则 IE7 会以 IE5.5 的怪癖模式呈现

于 2008-08-18T23:09:59.273 回答
1

我把你在那里描述的东西放在一起，它对我来说是正确的渲染。很可能你在某个地方有另一种风格，对你的表格或桌子有影响。如果您还没有这样做，那么使用reset.css文件非常有用。如果您想查看哪些样式正在影响特定元素，firefox 的Web 开发人员工具栏有一个方便的样式信息命令，用于查看哪些样式（来自哪些文件/样式块/内联样式）正在应用于它。您可以通过按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>

于 2008-08-18T23:10:00.867 回答
0

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

<br style="clear:both;" />
于 2008-08-19T00:07:23.153 回答