Below is the HTML code where the div is being cut by the table border when the page is in standards mode. Interestingly, if I remove the <!DOCTYPE html>, then it works fine as expected.
The issue of the outside div not behaving properly on the table seems to occur only in IE8 standards mode (IE8 quirks mode works fine). Surprisingly, IE11 quirks and standard modes exhibit the same problem. Chrome, on the other hand, does not face any such issues in both Standards and quirks modes.
I am puzzled as to why this inconsistency exists only in IE. I am keen to understand the exact cause behind this behavior and find a suitable solution for it.
table {
background-color: red;
}
#footer {
background-color: yellow;
margin-top: -10px;
}<div>
<table border=1>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>
</div>
<div id="footer">Footer</div>