Workaround for IE8 padding in table causing the border to hide
I'm working on making a web application cleanly support IE8 while continuing to support IE6. There is a know bug in IE8 where the background overlaps and covers the bottom border of a table when padding is used inside the table.
I'm looking for the cleanest workarounds, as leaving the bottom border missing isn't an option on the login screen.
Currently I'm inclined to add an outline to the css, as it is only visible in IE 8, as included below. I'm wondering if anyone else has a better suggestion.
(I need to admit that I don't have a windows id to check the bug submission with, but I'll probably have to create that from home, as there may be something in there. )
table.tblcontentinfo {
font-family: arial, helvetica, san-serif;
width: 350px;
/* outline: 1px solid #336699; */
/* current partial fix above*/
border: 1px solid #336699;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
margin-bottom: 0px;
}
table.tblcontentinfo td {
padding: 2px;
}
Html:
<body>
<br />
<br clear="all" />
<div style="margin-top: 120px; text-align: center;">开发者_运维百科;
<div id="realpage" style="visibility: hidden; margin-top: 120px; text-align: center;">
<table class="tblcontentinfo">
<form name="l" id="l" method="post" action="check" autocomplete="off" >
<tr>
<td colspan="2" class="bgtitle"> <span class="texttableheader">Title</span></td>
</tr>
<tr>
<td width="125" class="required alignright">Text1 </td>
<td><input name="text1" type="text" class="formfield" size="22" maxlength="8" tabindex="1" /></td>
</tr>
<tr>
<td class="required alignright">Password </td>
<td><input name="password1" type="password" class="formfield" size="22" maxlength="8" tabindex="2" /></td>
</tr>
<tr>
<td></td>
<td><input name="Submit" type="submit" class="button" value="Submit" /></td>
</tr>
</form>
</table>
</div>
<div id="msgpage">
Some text
</div>
</body>
(Yes, the clientele is just upgrading now, and at this point we're an IE only shop, although I'd love a browser neutral solution. )
References: # 50 is the bug I'm trying to workaround IE css support docs (search for outline)
Based off #50 from your link, you should be able to get around that by adding display: inline-block; to the CSS for your elements experiencing this issue.
I've gotten permission to use the outline hack I have commented out above. Looks like I'll be checking that in, as the worse it will do is double the border width under a properly functioning browser.
加载中,请稍侯......
精彩评论