1

当我以两种不同的方式访问使用 CSS3 PIE 的站点时，在一种情况下找不到 HTC 文件。我使用示例域名和路径名来说明以下问题。什么可能导致这种情况发生？

http://sampledomain.com/site <-- 在 IE8 中不呈现圆角

http://sampledomain.com/site/ <-- 呈现圆角

CSS圆角文件位于

http://sampledomain.com/site/content/css/pie.htc

该网站包含来自的 CSS 文件

http://cdn.cdndomain.com/path/to/content/css/rounded-corners.css

CSS：

.rounded-corners
{
    behavior: url(content/css/pie.htc);
}
4

4 回答 4

5

尽管您在其他地方对此问题发表了评论，但这实际上并不是 IE 中的错误。它完美地合理地处理了相对路径。

发生此问题的原因是，就 URL 路径而言，这两个 URL（即带斜杠和不带斜杠）实际上位于不同的目录中。

  • http://sampledomain.com/site-- 这被视为site根目录中的文件名。

  • http://sampledomain.com/site/-- 这被视为site根目录中的一个目录，并且您正在该目录中加载默认文件。

所以就浏览器而言，这两个 URL 位于不同的目录路径中。因此，如果您指定相对路径，它将与每个路径中的不同路径相关，并且其中一个显然不会指向正确的位置。如果您有其他具有相对路径的项目，例如图像，它们也会有同样的问题，并且它会出现在所有浏览器中，而不仅仅是 IE。（因此，我假设您在此页面上没有很多其他相对路径）

正如您已经制定的那样，快速解决方案是将其转换为绝对路径，以斜杠开头。这将确保它是从站点中的同一位置加载的，无论您从哪个 URL 加载它。

然而，这个问题暗示了一个更大的问题。行为良好的网站不应允许这两个 URL 都有效。不带斜线的 URL 应重定向到带斜线的 URL；无论是否有斜线，它都不应该简单地加载相同的内容。

允许两个 URL 加载相同的内容显然对您网站的 SEO 不利。这意味着谷歌会将您的网站视为具有相同内容的两个页面，这反过来会被视为您的谷歌排名的减分。

使用 .htaccess/mod_rewrite 可以轻松解决此问题，理想情况下，您可以像原始 CSS3Pie 加载问题一样紧迫地解决此问题。

希望有帮助。

于 2012-10-25T20:44:50.960 回答
2

由于behavior它是 Internet Explorer 的非标准 CSS 属性，因此它的实现也是非标准的（如，没有规范）。似乎唯一的选择是确保声明中 URL 的值是绝对路径——而不是相对路径。

这解决了这个问题：

.rounded-corners
{
    behavior: url(/site/content/css/pie.htc);
}
于 2012-10-25T19:49:28.223 回答
1

根据W3C，一个 url 是相对于样式表的 - 即。在你的情况下，cdn。我不知道它为什么会起作用！

但是，由于它部分工作，我有另一个答案给你。/site url 被浏览器解释为网站内的一个页面 - 浏览器无法判断它是一个没有 / 结尾的文件夹。这意味着相对路径将相对于网站的根文件夹。解决这个问题的最简单方法是将 url 更改为 /site/content/css/pie.htc

于 2012-10-25T19:46:53.800 回答
0

在标准 CSS 属性中，相对 URL 是相对于 CSS 文档的：

URI 可以用单引号或双引号引起来。相对 URI 是允许的，并且相对于样式表的 URL（而不是相对于网页的 URL）。

但是，behavior它是一个专有的 IE 属性，并且 URL 是相对于引用工作表的 HTML 文件的，因此确保它工作的更简单方法是使用绝对路径。

如果您仍然想使用相对路径，您可以使用 URL 重写，或者.htc在所有可能的路径中复制文件，或者在服务器端进行一些其他 hack，使其能够.htc从任何路径提供文件（例如在MVC 您可以添加一个处理所有.htc文件请求的路由，并使用从适当位置为它们提供服务的控制器）。由于所有这些解决方案都有些老套，我更喜欢绝对路径，除非应用程序可以同时存在于根目录或任何虚拟文件夹中。

于 2015-11-01T23:50:53.183 回答