IE 8 表间距

Question

所以我在我的网站上有一个表格，在 Chrome 和 FireFox 上显示良好，但在 Internet Explorer 上显然空间过大。在 Chrome 和 FF 中，表格的间距为最小尺寸（例如，它只占用所需的空间），垂直使用 141 像素。在 IE 中，每行的偏移量为 200px（来自检查器），导致表格的总高度为 800px。我四处寻找答案，但似乎没有解决我的问题，有什么想法吗？

HTML

<table style="margin: 0 auto; display:table;" class="no-spacing" cellspacing="0" cellPadding="0">
        <tr>
            <td>Email</td>
            <td><input type="email" name="email" value="{{ old('email') }}"></td>
        </tr>
        <tr>
            <td>Password</td>
            <td><input type="password" name="password" id="password"></td>
        </tr>
        <tr><td/>
            <td><input type="checkbox" name="remember"> Remember Me</td>
        </tr>
        <tr>
            <td/>
            <td><button type="submit" class="btn btn btn-primary" style="float:right;">Login</button></td>
        </tr>
</table>

表格的CSS

element.style {
}
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
input {
    line-height: normal;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheetinput:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i] {
    padding: 1px 0px;
}
user agent stylesheetinput:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189);
    background-image: none;
    color: rgb(0, 0, 0);
}
user agent stylesheetinput {
    -webkit-appearance: textfield;
    padding: 1px;
    background-color: white;
    border: 2px inset;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    cursor: auto;
}
user agent stylesheetinput, textarea, keygen, select, button {
    margin: 0em;
    font: 13.3333px Arial;
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
}
user agent stylesheetinput, textarea, keygen, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb;
}
Inherited from td
.productsTable th, td {
    text-align: left;
    min-height: 40px;
    min-height: 200px;
    margin: 5px;
}
Inherited from table.no-spacing
table {
    background-color: transparent;
    border-spacing: 0 5px;
    display: table-cell;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
user agent stylesheettable {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
}
Inherited from body
body {
    font-family: "lato", sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: #ffffff;
}
Inherited from html
html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
Pseudo ::before element
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
Pseudo ::after element
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 1

在你的 CSS 中：

.productsTable th, td {
    text-align: left;
    min-height: 40px;
    min-height: 200px;
    margin: 5px;
}

您指定的 ALL td 必须具有 200px 的 min-height。

在表格单元格中设置min-height 未定义为documented by W3C：

在 CSS 2.1 中，min-height 和 max-height 对表格的影响， 内联表格、表格单元格、表格行和行组未定义。

因此，浏览器对此特定属性的支持不一致。在我看来，Chrome 和 FF 是正确的，将 min-height 保留为 undefined 并忽略它。 IE8 不尊重 W3C 所说的离开它undefined。

您可以在另一个 SO 问题上阅读有关此问题的更多信息： min-height and table cells