display:table killing me in IE
I want to create horizontally-aligned table cells like the ones on this page.
I've followed the instructions, and I've even copied the css and markup verbatim, but no matter what I do IE 8 renders my table cells as blocks (stacked on top of each other instead of aligned next to each other).
css:
<style type="text/css">
body.TableStyles {
display: inline-table;
border-spacing: 4px;
}
div.maketable p {
display: table-cell;
width: 20%;
background-color: #cdf;
padding: 4px;
}
</style>
markup:
<body class="TableStyles">
<div class="maketable">
<p>< prev</p开发者_如何学编程>
<p>next ></p>
</div>
</body>
you should Replace your body tag with this one, it will work definitely !
<body class="TableStyles">
<div class="maketable">
<table>
<tr>
<td>
<p>< prev
</p>
</td>
<td>
<p>next >
</p>
</td>
</tr>
</table>
</div>
</body>
Your HTML is not well formed. The < and > before and after previous and next need to be escaped as < and > , respectively. This is probably forcing the browser into some quirks mode where it isn't CSS conform
instead of doing this, why not use <ul><li> to achieve the effect?
加载中,请稍侯......
精彩评论