CSS3 Border Radius property doesn't work in localhost?
I'm having a very strange problem with css3 border radius property. My following CSS and html works fine with IE9 if i double click the file and open with the IE9 , however if the border property does not work in IE if i open the file through LOCALHOST (xampp insatlled on windows 7). The same file works fine on localhost with other browsers. How can i fix it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style media="all" type="text/css">@import "circle.css";&l开发者_C百科t;/style>
</head>
<body>
<div class="exampleborderradiusf">F</div>
</body>
</html>
and the CSS is:
.exampleborderradiusf {
float:left;
background-color: #464646;
margin-top: 20px;
margin-right: 40px;
width: 70px;
height: 70px;
text-align: center;
-moz-border-radius: 35px;
border-radius: 35px;
color: white;
font-size: 20px;
position: relative;
top: 20px;
}
Thanks for the help.
IE9 is, of course, still in beta, so will have bugs and incomplete features. Its possible you may have stumbled on one of them.
I can't think of too many reasons why a CSS style would stop working while others in the same CSS file continue to work.
Have you checked that IE is still in IE9 mode, and not in IE8-compat mode or something like that. I can see that this sort of thing may change depending on the zone - I've seen similar things happen in IE8 where there's an obscure config setting that can make it switch over to IE7-compat mode when browsing within a local intranet.
Is your local server delivering the style sheet with the correct MIME-type (text/css)?
ackkk - i just discovered the same wierdness - exact same page coming from my public server renders fine - coming from localhost - no border-radius
and then hit F12 on your page and you may discover that for some unhinged reason your localhost file is displaying in IE7 mode so i stuck this on my page:
meta http-equiv="X-UA-Compatible" content="IE=9000"
it worked need to research some more but i think you can monkey with IIS to get this automated this stupid problem was not a good way to spend friday night
just an idea (but i've never heard of such a problem): could you please try to reference your css-file like this:
<link rel="stylesheet" type="text/css" href="circle.css" />
instead of
<style media="all" type="text/css">@import "circle.css";</style>
EDIT: are the other styling-rules applied correctly? if so, please just ignore my idea... this is for "the whole stylesheet isn't loaded" - you havn't given exact information about that.
This is just a thought, but shouldn't:
<style media="all" type="text/css">@import "circle.css";</style>
be, instead:
<style media="all" type="text/css">@import url("circle.css");</style>
Of course, this wouldn't (or at least shouldn't) explain why the stylesheet isn't being loaded locally; and if some styles other than the border-radius ones are being loaded/applied then this answer isn't applicable anyway.
加载中,请稍侯......
精彩评论