简体   繁体   English

IE9边界半径

[英]IE9 border-radius

curved css corners for some reason dont seem to work in IE9. 由于某种原因弯曲的CSS角落似乎在IE9中不起作用。 I know it supports it however i have looked all over the web for a solution and cant find one that works for me. 我知道它支持它,但是我已经在网上寻找解决方案而且无法找到适合我的解决方案。 I tried putting <meta http-equiv="X-UA-Compatible" content="IE=9" /> but that did'nt work. 我试过把<meta http-equiv="X-UA-Compatible" content="IE=9" />但是没有用。 I used the .htc file and behavior: url(border-radius.htc); 我使用.htc文件和behavior: url(border-radius.htc); however that only works sometimes when switching to compatibility mode. 但是,只有在切换到兼容模式时才有效。 I even tried declairing all 4 values, and didnt make a diffrence. 我甚至试图宣布所有4个值,并没有产生差异。 Work beautifuly in firefox, chrome, and safari but not in IE. 在firefox,chrome和safari中工作,但不在IE中。 Any help? 有帮助吗? Check it out: my web page If you have some debugging tool might help you help me. 检查出来: 我的网页如果你有一些调试工具可能会帮助你帮助我。

I found if your using the CSS style filter for IE8 and below browsers it will interfere with IE9 styles causing border-radius to not work and possible other ill effects. 我发现如果您使用IE8及以下浏览器的CSS样式filter器,它将干扰IE9样式,导致border-radius无法工作,并可能产生其他不良影响。

To fix it add this to your html head: 要修复它,请将其添加到您的html头:

<!--[if gte IE 9]>
<style type="text/css">.elementClass { filter: none !important; }</style>
<![endif]-->'

Use the vendor extensions, -moz-border-radius:15px; -ms-border-radius:15px; -o-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; 使用供应商扩展, -moz-border-radius:15px; -ms-border-radius:15px; -o-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -moz-border-radius:15px; -ms-border-radius:15px; -o-border-radius:15px; -webkit-border-radius:15px; border-radius:15px;

You really only need the -ms version for what you want, but if you include them all you provide a broader spectrum of coverage. 你真的只需要你想要的-ms版本,但是如果你包含它们,那么你提供更广泛的覆盖范围。

Looks like the page is firing Quirks Mode, try moving those script & css includes down inside the tag... nothing should ever come between a doctype and it's html tag. 看起来该页面正在触发Quirks模式,尝试将这些脚本和css包含在标签内...在doctype和它的html标签之间不应该有任何内容。

Detail explanation here Investigating Document Mode Issues 详细说明此处调查文档模式问题

I found that my border radius in ie9 is working on localhost but not on a server. 我发现ie9中的边界半径在localhost上工作,但在服务器上却没有。 Im using css3PIE to acomidate ie8 and below, would this be interfering with ie9? 我使用css3PIE来表示ie8及以下,这会干扰ie9吗?

IE9 don't need any prefix for border-radius (for sure you don't need -ms- prefix at least for this property!). IE9不需要border-radius任何前缀(确保你至少对这个属性不需要-ms-前缀!)。 Your browser probably have a problem. 您的浏览器可能有问题。 Maybe you're running beta or something like that. 也许你正在运行beta或类似的东西。

Please test this demo in another IE9 running computer or have your IE restarted and try it to see IE9 renders border-radius just fine. 请在另一台运行IE9的计算机上测试这个演示 ,或者重新启动IE并尝试查看IE9渲染border-radius就好了。

Quirks mode is where IE9 switches back to IE5 functionality (added following link to @seanmetzgar post also) Quirks模式是IE9切换回IE5功能的地方(另外链接到@seanmetzgar也发布了)

Detail explanation here Investigating Document Mode Issues 详细说明此处调查文档模式问题

With a site I look after, which had ASP code right at the top of page, I added 我补充说,有一个我关注的网站,它在页面顶部有ASP代码

<!DOCTYPE html> 

just in front of the tag, below the code, and IE9 stopped going into Quirks Mode. 就在标签前面,代码下方,IE9停止进入Quirks模式。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM