Question

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

Answer 1

正如我在评论中所说，我建议使用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 website有关于如何执行此操作的说明。（另请参阅CSS3Pie其他已知问题的相同页面，其中大部分也适用于border-radius.htc）

Answer 2

在我的情况下，我使用了馅饼，而且我有时间让它工作。

首先：如果您有权访问.htaccess文件，请在底部添加。

AddType text/x-component .htc

接下来拿你的.htc文件（或者我的情况下是几个饼图文件）然后在引用我的.htc文件时：

behavior: url(/PIE.htc);

如果您无法添加.htaccess，请使用cssPie附带的pie.php文件并将其引用。

behavior: url(/PIE.php);

还要确保您的元素是相对的，并设置了某种z-index：

z-index:1;
position:relative;

它在ie8中不起作用，直到我有这个设置。

希望这会有所帮助!!

Answer 3

我也将CSS3Pie与CakePHP一起使用 - 我只是将PIE.htc和PIE.php放在app / webroot / css中，在我的style.css文件中引用它就像这样：

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

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

3 个答案: