CSS3PIE在IE中根本不起作用

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网站上的故障排除文档,但似乎无法找到任何解决方案.

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

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

接下来转到你要设置的任何样式,例如文章中的一些表单字段,并在你想要样式的任何字段/ div等上放置:class ="YOURCLASSNAME".

这应该是,手指交叉工作.:-)

Answer 1

您是否使用正确的mimetype提供htc文件？它应该作为text/x-component提供.此外,不应该为gzip文件提供服务.您是否查看过以下网站:http://www.twinhelix.com/css/iepngfix/demo/？