2016-12-05 11 views
0

IE環境でスタイリングの問題があります。 border-radiusを使ってdivサークルを作成すると、円のdivの境界線がchromeやfirefoxのように滑らかではありません。あなたは、背景画像を配置する際に60%がdivの正方形を作る:後IE:背景のボーダー半径が滑らかでない

は私が

HTML

<div class="col-sm-4"> 
    <div class="circle-images"></div> 
</div> 

CSS

パディングトップを使用するコードです。

.circle-images{ 
    width:60%; 
    padding-top:60%; 
    border-radius: 60%; 
    margin-right: auto; 
    margin-left: auto; 
    background: url("some/path/to/jpg") no-repeat center center; 
    background-size:contain; 
} 

このスタイルも試しました。国境は国境なしより少し滑らかでしたが、国境には多くの騒音があります。

.circle-images{ 
    width: 60%; 
    padding-top:50%; 
    border-radius: 60%; 
    border: 27px solid #EAEAE4; 
    margin-right:auto; 
    margin-left:auto; 
    background: url("some/path/to/jpg") no-repeat center center; 
    background-size:contain; 
} 

IEのクロムとして境界線を滑らかにする方法はありますか?

**更新** @LGSonはサンプル画像を求めていたので、ここではこれはIEのバグです

IE noises

+0

IEのバージョンとは何ですか? – epascarello

+0

Edgeを使用していますが、ie8とエミュレータをサポートしたいと思っています。つまり、エッジ上に8つのノイズも表示されています:( –

+0

IE11-9を調べたところ、どんなノイズが出ていますか... ...画像がありますか? – LGSon

答えて

0

を何が起こっているかです。最も安全な方法(もっとも簡単な方法ではありません)は、イメージを円形にすることです。別の解決策は、ブラウザ固有のハッキングを試してみることですが、これは非常に危険です。

もし可能であれば、透過性を持たせたPNGのような画像構造に変換し、画像を円形にすることをお勧めします。

関連する問題