Table cell sizing in quirk mode
In Firefox 4 and Chrome (unverified in other browsers), the table cell has a small black border on the bottom with <!DOCTYPE html> (i.e. html5 mode). Take it out (i.e. quirk mode) and the border disappears. I was wondering how can I have the border-less version in html5 mode. Am I missing something in the stylesheet?
With small, unintentional border on bottom when rendering with <!DOCTYPE html>
Without border on bottom when rendering without <!DOCTYPE html>
Thanks
<!DOCTYPE html>
<html>
<head>
<style>
table.icon {
display: inline-table;
border-collapse: collapse;
border-spacing: 0px;
text-align: center;
vertical-align: middle;
padding: 0px;
margin: 2px 0px;
border: hidden;
}
table.icon td.content {
vertical-align: middle;
background-color: black;
width: 100px;
height: 100px;
padding: 0px;
margin: 0px 0px;
border: hidden;
}
.block {
width:50px;
height:100px;
background-color: green;
}
</style>
</head>
<body>
<table class="icon"&开发者_StackOverflow社区gt;
<tr>
<td class="content"><img class="block"></td>
</tr>
</table>
</body>
</html>
I see no difference, but:
- icons should not be
imgelements, they should be background images - a table with one cell is not a table at all
- if you want a border on the bottom of something (or even want to remove the same), use the
border-bottomproperty - regardless of the differences, you always want a properly included doctype declaration (how you're doing it here is fine)
- the
type="text/css"attribute onstyleelements is unnecessary in HTML5 - while not invalid in HTML5, closing
imgelements in HTML is still goofy unless you require your code to have XML conformity
加载中,请稍侯......
精彩评论