css - Safari 6、FF19とIE8のCSS

Question

FF19とSafari6で見栄えがするが、IE 8ではひどいページ付けを作成しました（スクリーンショットを参照）。IE 8にFFのように表示させるにはどうすればよいですか？

FF 19：

IE 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;
}

さて、-tagに追加border="0"することで、これらの境界線を取り除きました。imgまだ、 ...

• ボタンは下に垂直に配置されていません

• border-radiusIE8では完全に無視されます

IE 8でこれを修正するにはどうすればよいですか？

Answer 1

.Internet Explorer は、border-radius のような CSS の丸い角をサポートしていません。また、vertical-align: bottom も使用します。すべての a タグの親要素に overflow: hidden を使用してから、すべての a タグで float:left を使用します。