代码之家 › 专栏 › 技术社区 › mk.

IE7 HTML/CSS页边距底部错误

internet-explorer-7 css html

mk. · 技术社区 · 16 年前

以下是场景:

这是我试过的。

将窗体或字段集包装在未设置样式的div中。没有明显的更改。
把桌子上的边距底部用尼克斯键固定,而不是用一个div来包装它,并给它一个19px的填充底部。没有明显变化。
在桌子的底部加上一个固定高度19px的div。没有明显变化。
在表和字段集之间放置一个空格。

我使用的是重置样式表和xhtml过渡doctype。

编辑: 我还有IE7WebDeveloper工具栏和Firebug。两款浏览器的样式信息都显示它有一个边距底部:19px;但显然不是IE7的。

6 回复 | 直到 12 年前

mongo296 14 年前

Linus Caldwell Emperor 2052 11 年前

替换 margin-bottom: 19px; 具有 <div/> 具有 height: 19px .

删除的CSS样式 margin-bottom 并插入 <div/> 高度: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">

Orion Edwards 16 年前

你有有效的文件类型吗?否则IE7将以基本上是IE5.5的怪癖模式呈现

Jeremy 16 年前

如果从表下面的元素中删除浮动,是否显示边距?

Charlene Vas eplawless 5 年前

reset.css Web Developer Toolbar for firefox有一个方便的样式信息命令,用于查看哪些样式(来自哪些文件/样式块/内联样式)正在应用于它。您可以按激活它 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>

Kevin 16 年前

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