开发者

IE9 border-radius shorthand not supported?

开发者 https://www.devze.com 2023-02-17 15:06 出处:网络
I have a few things I\'ve made in the past that have the border-radius attribute like this: border-radius: 7px;

I have a few things I've made in the past that have the border-radius attribute like this:

border-radius: 7px;

This is not working in IE9. I thought IE9 was supposed to support border-radius? If you need an example, see this site. All of the boxes on the right hand side of the page should have a curved border. It works in Chrome and Firefox...

On another annoying, unrelated note, I found out today that IE9 doesn't supp开发者_运维百科ort the :last-child pseudo class. What an incredible letdown so far...


Have you included this:

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

See this thread.


Yes the answer to this correct, however as a related side note, IE9 currently does not support border radius used in conjunction with the gradient filter.

Spent an hour trying to make this work before bothering to search for a similar question.

// This is the filter code for a gradient in IE (6-9) along with a border radius
//THIS DOES NOT WORK
//You have to use one or the other, you could use javascript for rounded corners and then use the gradient if you wish    

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bcdd68', endColorstr='#355e0b',GradientType=0 ); /* IE6-9 */

/*border radius*/
 -khtml-border-radius:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;


IE9 does support border radius, even shorthand. I'm not sure why it doesn't work on your website, but it is supported.

(See http://jsfiddle.net/wJd2h/ for proof)

IE9 also supports :last-child.

Maybe you are using an old HTML doctype?

EDIT: I looked at your source. Change <meta http-equiv="X-UA-Compatible" content="IE=8" /> to <meta http-equiv="X-UA-Compatible" content="IE=9" />


Even Better ....

<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

This is taken from the exellent HTML5 Reset template


IE9 does support browser radius, but if you are working on a local site or local file, you should be sure the Broser Mode and Document Mode are right. To check it hit F12 and then check de values (Please see the picture). For example if Document Mode are set on Quirks Mode (which is the default) and you don't specify the document mode on the html document, IE9 may interpret this document as a IE7 document so the radius doesn't work. But if you set Document Mode to IE9 standard you will see a pretty radius on the input.

Please take a look at the picture in http://moodle.org/pluginfile.php/115/mod_forum/post/843271/IE9-F12.jpg

I hope that this can help you with the radius. :)

So long this post.


I'm no expert, but when ever I use

<meta http-equiv="X-UX-Compatible" content="IE=edge,chrome=1"> or even
<meta http-equiv="X-UA-Compatible" content="IE=9" />

the W3C VALIDATION

checker in Dreamweaver CS5.5 kicks it back, stating the following

"Bad value X-UA-Compatible for attribute http-equiv on element meta. [HTML5]"


If you are using VMWare Fusion on a Mac, it could be an issue with the VM. See IE9 Rendering elements with opacity, border-radius or cufon


ok, I searched Google and found this. In fact, you do not need to do anything on your code, please check if the "Compatibility View" is on in your IE9.

0

精彩评论

暂无评论...
验证码 换一张
取 消