html - IE8的圆 Angular 按钮

Question

我正在创建一个圆 Angular 背景图片，它在 IE9、Firefox、Chrome 等中看起来不错，但在 IE8/IE7 中看起来很平淡。这是我的 HTML:

<div  class="rounded-box"></div>

这是我的 CSS:

.rounded-box {

    width: 455px !important;
    display: block;
    padding: 6px 10px;
    width:435px;
    height:28px;
    font: 13px Georgia;
    border: 1px solid #bbb;
    background: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: -webkit-gradient(linear, left bottom, left top, from(#ffffff), to(#ffffff));
    background: -moz-linear-gradient(top, #ffffff, #ffffff);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)";
    -webkit-box-shadow: 0 -1px 0 rgba(0,0,0, 0.1), 0 1px 0 rgba(255,255,255, 0.7);
    -moz-box-shadow: 0 -1px 0 rgba(0,0,0, 0.1), 0 1px 0 rgba(255,255,255, 0.7);
    box-shadow: 0 -1px 0 rgba(0,0,0, 0.1), 0 1px 0 rgba(255,255,255, 0.7);
    -webkit-background-clip: padding-box;
    margin:0 auto;
    margin-bottom:10px;
}

那么，你能帮我解决 IE8/IE7 问题吗？

谢谢巴尔卡尔

Answer 1

试试这个，感谢 Worthapost.com(原帖来自:http://www.worthapost.com)

CSS:

.container {
        display: block;
        width: 600;
        position: absolute;        

    }

    .content {
        background: #e4e4e4;
        font-weight: bold;
        padding: 3px;
    }

    .round_span3 {
        background: #e4e4e4;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 3px;
    }

    .round_span2 {
        background: #e4e4e4;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 2px;
    }

    .round_span1 {
        background: #e4e4e4;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 1px;
    }

HTML:

<div class="container">
    <span class="round_span3"></span>
    <span class="round_span2"></span>
    <span class="round_span1"></span>
    <div class="content">
        <!-- Content goes here --> My name is Bond
        <br/>
        James Bond
    </div>
    <span class="round_span1"></span>
    <span class="round_span2"></span>
    <span class="round_span3"></span>
</div>

更新:演示链接 http://jsfiddle