Border-radius on ie9 - works locally but not when deployed_问答_开发者

Border-radius on ie9 - works locally but not when deployed

开发者 https://www.devze.com 2023-02-19 15:43 出处：网络

As the titles says, my css works fine locally when using ie9, but when deployed to IIS7 the border-radius and box-shadow is not applied, although works fine with ff4 and Chrome.

.blabla
{
    -moz-border-radius:10px;
    border-radius: 10px;
    box-shadow: 3px 3px 10px #000000;
    height: 101px;
    margin: 5px;
    width: 225px;
    cursor:pointer;
    background:url('./Content/images/background.png') scroll 0 0px no-repeat;
}

I'm working with an MVC3 project, which has the <!DOCTYPE html> already in. It did not work locally originally when 开发者_开发百科using border-radius: 10px 10px 10px 10px; I changes it to only mention 10px once and that made the trick (and also made the box-shadow working) but it's still not working when deployed. Any ideas?

Edit: I checked in IE's developers tool, the border-radius is there locally but does not show up when deployed, which explains why it's not working... the question is why is it not displayed?

EDIT2: I noticed something else... My doctype while written correctly in my code: <!DOCTYPE html> is shown as disabled in the browser:  Still can't figure how to fix it.

EDIT3: I created a normal ASPX Web Application, same issue. Works locally but on IIS7 the doctype is commented...

I was struggling with the same issue. But I just found my answer. It was IE's "Compatibly View".

Show Command Bar > Page > Compatibility View Settings.

For my particular issue, it was a defaulted check box "Display intranet sites in Compatibly View".

Your page probably triggers IE7 mode in IE9. On your local machine you manually changed the settings to use standard mode in IE9, but after deployment you again see the page in IE7 mode => no border-radius. Been there, done that.

Another reason might be the content type your server sends for the page, see http://hsivonen.iki.fi/doctype/

Hey, not sure why that is happening, it shouldn't normally. Have you tried the easy stuff like refreshing without cache?

Anyway, you should use all vendor prefixes:

.blabla {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 3px 3px 10px #000000;
    -webkit-box-shadow: 3px 3px 10px #000000;
    box-shadow: 3px 3px 10px #000000;
}

Thanks! The meta tag worked for me. I had to put it in the HeadContent section on the page though, putting in the masterpage did not fix it. Since I don't want to have to worry about compatibility mode setting on the client side, forcing it for me works better.