css - Safari 6、FF 19 与 IE 8 中的 CSS

Question

我创建的分页在 FF 19 和 Safari 6 中看起来不错，但在 IE 8 中却很糟糕（见我的截图）。如何让 IE 8 像 FF 一样显示它？

FF 19：

即 8：

这是我的HTML：

<div class="tc_page_top">
    <a title="erste Seite" href="#1"><img src="images/resultset_first_small.png"/></a>
    <a title="vorige Seite" href="#0"><img src="images/resultset_previous_small.png"/></a>
    &emsp;Seite 1 von 7&emsp;
    <a title="nächste Seite" href="#2"><img src="images/resultset_next_small.png"/></a>
    <a title="letzte Seite" href="#7"><img src="images/resultset_last_small.png"/></a>
    &emsp;
    <a  class="on" href="#1">1</a>
    <a href="#2">2</a>
    <a href="#3">3</a>
    <a href="#4">4</a>
    <a href="#5">5</a>
    <a href="#6">6</a>
    <a href="#7">7</a>
</div>

和 CSS：

#tc_frame {
    background-color: #FFFFFF;
    border: thin solid #666666;
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 4px 5px #222222;
    font-family: "Lucida Grande","Lucida Sans Unicode",sans-serif;
    margin: 50px auto 0;
    padding: 20px 30px;
    width: 760px;
}
.tc_page_top, .tc_page_bottom {
    font-size: 0.7em;
    font-weight: bold;
    color: #006;
    text-align: center;
    margin-top: 2em;
}
.tc_page_top a {
    display: inline-block;
    border: thin solid #999;
    margin: 1px;
    padding: 0px 2px 0px 2px;
    text-decoration: none;
    color: #666;
    background-color: #eee;
    border-radius: 2px;
}
.tc_page_top a:hover {
    color: #fff;
    background-color: #333;
    border-style: inset;
}
.tc_page_top a.on {
    color: #003;
    background-color: #9CF;
    border-color: #009;
}
.tc_page_top a img {
    vertical-align: text-bottom;
}

现在，通过添加border="0"-tag img，我摆脱了这些边界。仍然， ...

• 按钮未在底部垂直对齐

• border-radius被 IE 8 完全忽略

我怎样才能在 IE 8 中解决这个问题？

Answer 1

.Internet explorer 不支持像border-radius 这样的css 圆角。并且还使用vertical-align:bottom。使用overflow:hidden到所有a标签的父元素，然后在所有a标签上使用float:left