Geek Answers Handbook

The border radius behaves strangely, i.e.

I just noticed that the border radius for my toolbar is not working in ie9. The strange thing is that there is a window shadow that makes a curve, so I have no idea what is going on. In IE, the actual toolbar of the div is not curved, but it makes the window shadow. Everything is fine in all other browsers, and I know that ie9 supports border radius.

Anyway css is below. I removed all the prefixes and unnecessary styles, so there is only the shadow of the box and the radius of the border. Here is jsfiddle with all styles.

UPDATE

I found out what is going wrong. The gradient stopped the border radius form working in IE, so I will now disable it in IE. If someone has a way to keep them and the border radius, that would be great. I added gradient styles.

.membersbar { width:98%; background-color:#313131; height:30px; padding-top:5px; border-bottom-right-radius:2em; position:fixed; top:0; box-shadow:0 0 5px 5px #999; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#313131', endColorstr='#202020'); background: -webkit-gradient(linear, left top, left bottom, from(#313131), to(#202020)); background: -moz-linear-gradient(top, #313131, #202020); }

This is relevant information in the head;

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head>
+4
source share
3 answers

I understood what was going on. The gradient that I had (now edited) stopped the border radius from working in IE. I added a gradient to css. If someone has a way to preserve the gradient and radius of the border, this will be great, otherwise I will have to disable the gradient in IE.

0
source

Please check if your main HTML document starts with

 <!DOCTYPE HTML>

IE assumes that any page without the DOCTYPE tag will be an "old" document other than HTML5 and uses some kind of weird "compatibility" mode, ignoring many CSS3 features.

+1
source

Make your IE use the latest features of IE. Add the following metatag to your HEAD element (it must be the first):

 <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> </head>
+1
source

More articles:


All Articles