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のために、ここで私を助けてくださいことができますか？

おかげBalkar

Answer 1

あなたはこれを試みることができる：http://css3pie.com/

Answer 2

はこの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> 

UPDATE：デモリンクhttp://jsfiddle