CSS3 PIE Doesn't Work in IE8 or below

StackOverflow https://stackoverflow.com/questions/21334240

  •  02-10-2022
  •  | 
  •  

Вопрос

There are no curved borders. IE9 and above works fine.

http://cscsu.org.uk/WiltshireMedicinesManagement/csu.htm is a very stripped down version of what I have

<!DOCTYPE html>
<html lang="en-US">
<head>
<style type="text/css">

.wpdm-metro {
behavior:url(/border-radius.htc);
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
border-radius:8px;
margin-bottom:2px;

margin: 0 5px 7px 0; 
height:120px; 
width:45%; 
background:#66cc33 !important; 
color:white !important;
}
</style>
</head>

<body>
<div class="wpdm-metro">
</div> 
</body>
</html>

Am I doing anything obviously wrong? The file exists (border-radius.htc) and I've even added AddType text/x-component .htc to .htacccess

Это было полезно?

Решение

For whatever reason, PIE won't work unless you remove !important from the background rule.

Though I haven't seen this mentioned in the documentation it worked for me when faced with an almost identical issue.

.wpdm-metro {
    behavior:url(/border-radius.htc);
   -moz-border-radius:8px;
   -webkit-border-radius:8px;
   -khtml-border-radius:8px;
    border-radius:8px;
    margin: 0 5px 7px 0; 
    height:120px; 
    width:45%; 
    background:#66cc33; 
    color:white;
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top