Rounded Border IE10 (Compatibility mode)

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

Domanda

I am actually making a website where the main browser is Internet Explorer 10. They set the website so the Navigation Mode is set to compatibility IE10. (you can see this when you press F12, the info are on the bottom)

So I don't want to switch to the Navigator mode IE10, because they made an interface already, and if I change it, it just goes weird.

So Im going to explain you what I tried to get my rounded border to work ... They work half of the time.

So first I tried border-radius, but no succes with it.

So I then look for a plugin on the internet to find a way to make some rounded border and I found CSS3PIE.

This is like a JS plugin that can make the rounded border.

Like I said, it work half of the time. So my css with this pluggin look likes this:

width:100px;
padding:20px;
top:0px;
position:relative;
vertical-align:top;
border:1px solid black;

-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius:4px 4px 4px 4px;
border-radius:4px 4px 4px 4px;
-webkit-box-shadow: 0px 0px 2px rgb(0, 0, 0);
-moz-box-shadow: 0px 0px 2px rgb(0, 0, 0);
box-shadow: 0px 0px 2px rgb(0, 0, 0);
behavior: url(http://blablabla/Pie2/PIE.htc) ;

So as you can see, I just need to add up the file to the css and it do everything automaticly.

The probleme I have right now, is when I load the page for the first times, everything loads correctly(the borders), but when I switch between tabs on the website, sometimes the borders appears, and some other time they just wont appear. When they are not appeard, I need to mouse over the element to make them appear. (I guess that's a function that they have in their JS)

That thing is really annoying and that's what I want to fix :) I want my border to always be there when I switch tabs!

If you have any other solution, feel free to inform me about them!

Thanks for any help!

__________>

Thanks, they want to stay with IE10. Do you know any other apps like CSS3PIE that I could try to see if I get any difference?

È stato utile?

Soluzione

You can put this on the <head> section of your website:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

This will disable the Compatibility mode and stop messing your site.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top