IE6、IE8 和 FF 的 HR 保证金问题答案

【问题标题】：HR Margin issue with IE6, IE8 & FFIE6、IE8 和 FF 的 HR 保证金问题
【发布时间】：2012-01-05 04:03:44
【问题描述】：

你好，

我在 IE6 中的 <HR> & <TABLE> 标记之间出现了间隙（一些空白）。但是相同的代码在 IE8 和 FF 中的工作方式不同。这是我的示例代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
* {
    margin: 0px;
    padding: 0px;
}
</style>
</head>
<body>
<div style="display: inline; height: 100%;" id="printdiv">
<table width="70%" id="Tableprint">
    <tbody>
        <tr>
            <td style="padding-left: 15px;">
            <table width="100%" style="border: 0px solid rgb(204, 204, 204);">
                <tbody>
                    <tr>
                        <td nowrap="" colspan="2">
                        <span class="formLabel">dev site</span>
                        <span class="bodyText">Transfer Secure </span></td>
                    </tr>
                    <tr>
                        <td nowrap="" align="left" width="50%" valign="bottom">
                            <span><b>Current Date:Wednesday, 02 Mar 2011, 01:42 IST</b></span>
                        <span><b>Report Date</b></span>
                        <span>Wednesday,20 Oct 2010</span></td>
                        <td align="right" valign="bottom">
                            <input type="button" id="Buttoncancel" value="BACK">
                        </td>
                    </tr>
                </tbody>
            </table>
            <hr align="left" width="100%">
            <table cellspacing="0" width="100%" style="border: 1px;">
                <thead>
                    <tr>
                        <td style=" width: 10%; padding-left: 5px;"><b>Column1</b></td>
                        <td align="right" style="padding-bottom: 3px; font-weight: bold;">Credit</td>
                    </tr>
                </thead>
            </table>
            <hr align="left" width="100%">
            <div id="Footer">
            <table cellspacing="0" cellpadding="0" border="0" width="100%">
                <tbody>
                    <tr>
                    <td align="right">Test Data</td>
                    </tr>
                </tbody>
            </table>
            </div>
            </td>
        </tr>
    </tbody>
</table>
</div>
</body>
</html>

如果我添加以下样式，那么我会在 IE 8 和 FF 中获得空间，但问题是在 IE 6 中我看到 <HR> 周围有额外的空间

hr {
    margin-bottom: 7px;
    margin-top: 7px;
}

请帮帮我。

感谢提前在此处输入代码

【问题讨论】：

为什么需要所有这些表？
我和凯尔一起做这个。如果在 IE6 中发生的最糟糕的情况是您获得了一些额外的空间，那么您应该忍受它并立即放弃。

标签： html css internet-explorer-8 internet-explorer-6

【解决方案1】：

添加这个 CSS：

table, tr, td, hr {
    line-height: 1.15;
}
hr {
    clear: both;
    display: block;
    *margin: -7px 0; /* ie7 and below */
}

This 帮助了我，但网站无法正常运行，所以这里有一个cached link。

【讨论】：