CSS3 Border Radius property doesn't work in localhost?_问答_开发者

CSS3 Border Radius property doesn't work in localhost?

开发者 https://www.devze.com 2023-02-04 01:29 出处：网络

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 doe

相关专题：css

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.