Question

我正在尝试使用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 border radius代码，因此我知道文件正在加载。出于某种原因，当在IE中查看页面时，饼图行为不起作用。由于某种原因，角落只是左侧：-S。即使他们表现出类'form_field'。我已经浏览了CSS3PIE网站上的故障排除文档，但似乎无法找到任何解决方案。

编辑＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt; ＆GT;

我甚至尝试将它放在我网站根目录中的自己的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。

EDIT 2＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;

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

编辑3＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;

最后！对于其他人来说，这里的好处是如何使用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" />

接下来转到你要设置的任何样式，例如文章中的一些表单字段并放入：你想要造型的任何字段/ div等上的class =“YOURCLASSNAME”。

这应该是，手指交叉工作。： - ）

Answer 1

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

Answer 2

我遇到了这个问题并且让我疯狂一段时间试图解决这个问题。事实证明，IE解释行为属性是一种异常现象......它的“行为”与css属性中指定的所有其他URL不同。这来自CSS3PIE支持：

IE解释相对于行为属性的URL 源HTML文档，而不是像每个相对于CSS文件其他CSS属性。这使得调用PIE行为不方便，因为URL必须是：
- 来自域根目录的绝对 - 这使得CSS不容易在目录之间移动 - 或者，
- 相对于HTML文档 - 这使得CSS不容易在不同的HTML文件之间重用。

因此，如果您在根用户URL（'/ PIE.htc'）中有PIE文件。我还需要使用URL（'/ PIE.php'）方法，所以如果你使用PHP，请尝试一下。

CSS3PIE在IE中根本不起作用

2 个答案: