0

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

FF 19：

法拉盛 19

即 8：

即 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 中解决这个问题？

4

1 回答 1

0

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

于 2013-02-28T01:24:14.537 回答