0

我正在尝试通过使用http://css3pie.com在 IE 中获得圆角的解决方法。我在我的 css 中包含了以下内容，它在页面加载时被加载。所有这些都在 Joomla 1.5 中加载。

.form_field {color:#222 !important; border:2px solid #333; background:#f4f4f4;-webkit-    border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; color:#fff; padding:2px 0px 2px 0px; position:relative; z-index:99999;
behavior: url(./PIE.htc);

上面的代码保存在一个名为 template.css 的 css 文件中。

PIE.htc 和 PIE.php 位于我网站的根目录中。

下面是在 IE 9 中加载页面并选择 IE 8 渲染模式时生成的一些“视图源”。

      <link rel="stylesheet" href="/sos/plugins/system/rokbox/themes/light/rokbox-style.css" type="text/css" />
      <link rel="stylesheet" href="/sos/components/com_gantry/css/gantry.css" type="text/css" />
      <link rel="stylesheet" href="/sos/components/com_gantry/css/grid-12.css" type="text/css" />
      <link rel="stylesheet" href="/sos/components/com_gantry/css/joomla.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/joomla.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/customstyle.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/extended.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/sos-styles.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/template.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/typography.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/fusionmenu.css" type="text/css" />
      <script type="text/javascript" src="/sos/components/com_gantry/js/mootools-1.2.5.js"></script>
      <script type="text/javascript" src="/sos/plugins/system/rokbox/rokbox-mt1.2.js"></script>
      <script type="text/javascript" src="/sos/plugins/system/rokbox/themes/light/rokbox-config.js"></script>

从上面可以看出，正在加载 template.css 文件，如果我进入 chrome，则会执行 css3 边框半径代码，因此我知道文件正在加载。出于某种原因，当在 IE 中查看页面时，饼图行为不起作用。由于某种原因，角落只是左方：-S。即使它们显示为具有“form_field”类。我浏览了 CSS3PIE 网站上的故障排除文档，但似乎找不到任何解决方案。

编辑>>>>>>>>>>>>>>>>>>>>>>>>>>

我什至尝试将它放在我网站根目录下的自己的 css 文件中：

在源视图中单击它时会加载 css 文件，所以我知道这是有效的，在 css 文件中我有 @charset "utf-8";

/* CSS Document */
.form_field {border-radius: 5px !important; color:#fff !important; padding:2px 0px 2px 0px      !important; position:relative !important; z-index:99999 !important;
behavior: url(./PIE.htc) !important;}

所以我现在唯一能想到的是，joomla 正在剥离一些东西，或者它与其他东西发生冲突:-S。

编辑 2 >>>>>>>>>>>>>>>>>>>>

好的，还是不行，我已经注释掉了我的 index.php 中的所有 js 文件，以确保没有任何东西会与它发生冲突，但仍然不行。

编辑 3 >>>>>>>>>>>>>>>>>>>>

最后！，为了其他人的利益，这里是如何使用 Joomla 和 CSS3PIE 做到这一点。不知道为什么它不能与 PIE.htc 一起使用，但如果你使用 PIE.php 代替它，它可以工作。

制作一个名为 PIE.CSS 的 css 文件，将其放在您的站点根目录中，在其中放入：

@charset "utf-8";
/* CSS Document */
.YOURCLASSNAME {border-radius: 5px !important; color:#fff !important; padding:2px 0px 2px 0px       !important; position:relative !important; z-index:99999 !important;
behavior: url(./PIE.php) !important;}

接下来打开您的模板 index.php 文件并放入

<link rel="stylesheet" type="text/css" href="./PIE.css" />

接下来转到您想要样式的任何内容，例如文章中的一些表单字段，然后将：class="YOURCLASSNAME" 放在您想要样式的任何字段/ div 等上。

这应该是，手指交叉的工作。:-)

4

2 回答 2

5

您是否使用正确的 mimetype 提供 htc 文件？它应该作为 text/x-component 提供。文件也不应该被 gzip 压缩。您是否查看过以下网站： http: //www.twinhelix.com/css/iepngfix/demo/？

于 2012-01-20T13:26:02.540 回答
0

我遇到了这个问题，让我发疯了一段时间试图弄清楚。对我来说，这是 IE 如何解释行为属性的异常......它的“行为”与 css 属性中指定的所有其他 URL 不同。这是来自 CSS3PIE 支持：

  • IE 将行为属性的 URL 解释为相对于源 HTML 文档，而不是像其他所有 CSS 属性一样相对于 CSS 文件。这使得调用 PIE 行为不方便，因为 URL 必须是：

    • 绝对来自域根——这使得 CSS 不容易在目录之间移动——或者，
    • 相对于 HTML 文档——这使得 CSS 不容易在不同的 HTML 文件之间重用。

因此，如果您在根目录中有您的 PIE 文件，请使用 URL('/PIE.htc')。我还需要使用 URL('/PIE.php') 方法，所以如果您使用 PHP，请也尝试一下。

于 2013-05-06T08:39:25.073 回答