CSS IE8 köşeleri yuvarlatılmış

SORU

16 AĞUSTOS 2011, Salı

CSS IE8 köşeleri yuvarlatılmış

IE8 yuvarlak köşeler ile ilgili sorunlar yaşıyorum. Başarı olmadan birkaç yöntem denedim.

İşte benim kod:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>

<style>

BODY
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    padding: 2px;
    margin: 2px;
    color: #505050;
    line-height: normal;
}

P
{
    margin: 4px;
}

.categoryheading3
{
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    background-color: #297BB6;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 0;
    text-align: center;
    margin: 0px;
}

.leftcolumn
{
    width: 174px;
    padding: 8px;
    float: left;
    display: inline-block;
    background-color: transparent;
/*--min-height: 500px*/
    overflow: hidden;
}

.lefttop
{
    display: inline-block;
    width: inherit;
    margin: 0 5px 2em 0;
    float: left;
    width: 160px;
    background-color: #FFFFFF;
    border: 2px solid #297BB6;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;    
}
</style>


</head>
<body>

<div class="leftcolumn">
<div class="lefttop">
    <H4 class="categoryheading3">Heading</H4>
        <p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text </p>
</div>
 </div>
</body>
</html>

Firefox: bu üretir

firefox example

Ama bu IE8:

IE8 makes me sad

Eğer kimse herhangi bir ipucu varsa çok minnettar olurum!

edit: Joseph pasta kullanmak düşündüren yardımcı oldu.htc, ancak hala bu eleman değil çalışma ile mücadele ediyorum:

.categoryheading3
{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    behavior: url(PIE.htc);
    background-color: #297BB6;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 0;
    text-align: center;
    margin: 0px;

}