Закругленная угловая кнопка для IE8

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?

Спасибо, Балкар

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/