Quirks mode table and text alignment issues
I have the following html code snippet :-
<html>
<head>
<style>
body ul
{
margin: 0px;
border: 1px solid black;
padding: 0px;
list-style-type: none;
}
ul li {
display: inline;
padding: 0px;
margin: 0px;
border: 1px solid red;
}
table
{
display: inline;
margin: 0px;
padding: 0px;
border:1px solid green;
}
</style>
</head>
<body>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>
<table>
<tbody>
<tr>
<td>Item3</td>
<td>Stars</td>
</tr>
</tbody>
</table>
</li>
</ul>
</body>
</html>
I have to render this code in quirks mode(Due to an Iframe in the page, to render it properly I found that Quirks mode suits the best). I see that IE8 displays the code as:
Table not aligned with the other list items. Whereas mozilla displays it as :-
Here the table is aligned but the text is not.
What is going wrong here? How do I fix this across browsers
Insist on quirks mode? OK.
It looks like the td within the table has padding that causes it to render like that in IE.
Try removing padding+margin on all elements after table.
加载中,请稍侯......
精彩评论