html - CSS3PIE 在 IE 中根本不工作

Question

我正在尝试通过使用 http://css3pie.com 在 IE 中使用变通方法来获得圆 Angular .我在我的 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 中查看页面时，饼图行为不起作用。由于某种原因， Angular 落只是左方:-S。即使它们显示为具有“form_field”类。我浏览了 CSS3PIE 网站上的故障排除文档，但似乎始终找不到任何解决方案。

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

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

当在源代码 View 中单击它时会加载 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 等上。

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

Answer 1

您是否使用正确的 mimetype 提供 htc 文件？它应该作为 text/x-component此外，该文件不应以 gzip 压缩格式提供。您是否浏览过以下网站:http://www.twinhelix.com/css/iepngfix/demo/ ？