Question

我正在创建一个圆角背景图像，它在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吗？

感谢Balkar

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

Answer 2

你可以试试这个：http://css3pie.com/

IE8的圆角按钮

2 个答案: