IE 8表间距

Question

So I have a table on my site that displays fine on Chrome and FireFox but is apparently over-spaced on Internet explorer. In Chrome & FF, the table is spaced to it's minimal size (eg it only takes up as much space as it needs), using 141 pixels vertically. In IE, each row has an offset of 200px (from the inspector) causing the table to have a total height of 800px. I've looked around for an answer but nothing appears to have solved my problem, any ideas?

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 of table

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

In your CSS:

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

You're specifying ALL td must have a min-height of 200px.

Setting min-height in table cells is undefined as documented by W3C :

In CSS 2.1, the effect of min-height and max-height on tables, inline tables, table cells, table rows, and row groups is undefined.

Hence, browsers support is inconsistent on this particular property. In my opinion, Chrome and FF are correct by leaving the min-height as undefined and just ignoring it. IE8 is not honoring what W3C says about leaving it undefined .

You can read more about this issue on this other SO question: min-height and table cells