如何在MVC架构中包含border-radius.htc以使border-radius在IE中工作

发布于 2024-12-11 21:43:19 字数 359 浏览 0 评论 0原文

我正在使用 cakephp,并且想要对某些部分的圆角执行 css border-radius 。它适用于除 IE 之外的所有其他浏览器。我现在引用链接 http://www.htmlremix.com /css/curved-corner-border-radius-cross-browser 用于 IE 中的圆角支持。但问题是如何以及在何处准确放置 border-radius.htc。这些页面是从服务器和不同的文件夹动态加载的。那么我如何能够定义给定链接中引用的相对路径。

I am using cakephp and want to do css border-radius for rounded corners in certain sections. It is working well for all other browser except IE. I am now referring the link http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser for rounded corner support in IE. But the problem is how and where to exactly place the border-radius.htc. The pages are loaded from server dynamically and from different folders. So how will i be able to define the relative path as referred to in the given link.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

二货你真萌 2024-12-18 21:43:19

正如我在评论中所说,我建议使用 CSS3Pie 而不是 border-radius.htc。

但它们的工作方式相同,因此同样的问题也适用于它们。

答案是使用 .htc 文件的绝对 URL,而不是相对 URL。

这样,只要您知道 htc 文件在哪里,您就可以始终通过相同的路径引用它,并且它始终有效。

对 htc 文件使用相对 URL 似乎确实会造成混乱(现在还有一个关于完全相同主题的问题),但是切换到绝对路径,它应该可以工作。

因此,不要使用

behavior:url(../../css/pie.htc);

...,只需使用

behavior:url(/css/pie.htc);

[编辑]

如果这不起作用,仍有许多其他原因可能导致 HTC 文件无法工作。

最常见的一个是内容类型问题。 IE 对此非常挑剔:HTC 文件必须作为 text/x-component 提供。如果不是,那么 IE 将下载它,但随后完全忽略它。

如果是这种情况,您可以通过将内容类型添加到服务器配置来更正它。 CSS3Pie 网站 提供了有关如何执行此操作的说明。 (另请参阅同一页面,了解 CSS3Pie 的其他已知问题,其中大部分也适用于 border-radius.htc

As I said in my comment, I recommend using CSS3Pie instead of border-radius.htc.

But they both work the same way, so the same question applies to them both.

The answer is to use an absolute URL for the .htc file, rather than a relative one.

This way, as long as you know where your htc file is, you can always refer to it by the same path, and it will always work.

Using relative URLs with htc files does seem to be a recipe for confusion (there's another question here on exactly the same topic right now), but switch to an absolute path and it should just work.

So instead of using

behavior:url(../../css/pie.htc);

...just use

behavior:url(/css/pie.htc);

[EDIT]

If that doesn't work, there are still a number of other things which might cause a HTC file not to work.

The most common one is the content type issue. IE is very fussy with this: a HTC file must be served as text/x-component. If it isn't, then IE will download it, but then completely ignore it.

If this is the case, you can correct it by adding the content type to your server config. The CSS3Pie website has instructions on how to do this. (and also see the same page for other known issues with CSS3Pie, most of which will also apply to border-radius.htc)

别在捏我脸啦 2024-12-18 21:43:19

就我而言,我使用了馅饼,并且我花了很长时间才让它发挥作用。

首先:如果您有权访问 .htaccess 文件,请将其添加到底部。

AddType text/x-component .htc

接下来获取您的 .htc 文件(或者在我的情况下是几个饼文件)
然后,当引用我的 .htc 文件时:

behavior: url(/PIE.htc);

如果您无法添加到 .htaccess,请使用 cssPie 附带的ie.php 文件并引用该文件。

behavior: url(/PIE.php); 

还要确保你的元素是相对的,并设置了某种 z-index:

z-index:1;
position:relative;  

它在 ie8 中不起作用,直到我设置了该设置。

希望这有帮助!

In my case i used pie, and i was having a heck of a time getting it to work.

Firstly: If you have access to your .htaccess file, add this at the bottom.

AddType text/x-component .htc

Next take your .htc file ( or in my case several pie files)
Then when referencing my .htc file:

behavior: url(/PIE.htc);

if you are unable to add to .htaccess, use the pie.php file that comes with cssPie and reference that instead.

behavior: url(/PIE.php); 

Also make sure your element is relative, with some sort of z-index set:

z-index:1;
position:relative;  

It didn't work in ie8 untill i had that set.

Hope this helps!!

紙鸢 2024-12-18 21:43:19

我还将 CSS3Pie 与 CakePHP 一起使用 - 我只需将 PIE.htc 和 PIE.php 放在 app/webroot/css 中,并在我的 style.css 文件中引用它,如下所示:

border-radius: 8px;
-moz-border-radius: 8px;
behavior: url(/css/PIE.php);

I also use CSS3Pie with CakePHP - I simply place PIE.htc and PIE.php in app/webroot/css, and in my style.css file reference it like so:

border-radius: 8px;
-moz-border-radius: 8px;
behavior: url(/css/PIE.php);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文