Question

所以我的网站上有一张桌子，可以在Chrome和FireFox上显示，但在Internet Explorer上显然是超出范围的。在Chrome＆amp; 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;
}

您指定所有td的{{1}}必须为200px。

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

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

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

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

IE 8表空间

1 个答案: