CSS3PIE在IE中不工作

我想通過使用http://css3pie.com在IE中使用變通方法來獲得圓角。我已經在我的css中包含了以下內容，當頁面加載時會加載。所有這些都在Joomla 1.5中加載。CSS3PIE在IE中不工作

.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。

EDIT 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」任何字段/ divs等你想要的樣式。

這時應該，手指交叉工作。 :-)

來源

2012-01-20 user1148760

請檢查是否存在行爲：url（./ PIE.htc）;找到PIE.htc .. – Murtaza

是./PIE.htc如果該文件位於我的網站的根目錄下是否正確？，該文件在那裏，但似乎沒有工作。 – user1148760

如果它位於你的網站的根目錄下，你應該只執行'/ PIE.htc'並刪除這個點。 – pduersteler

您是否正在使用正確的mimetype提供htc文件？它應該作爲文本/ x分量此外，文件不應該服務gzipped。您是否瀏覽過以下網站：http://www.twinhelix.com/css/iepngfix/demo/？

來源

2012-01-20 13:26:02 Tomas

我認爲它可能是因爲我根本沒有改變.htaccess文件，最後我使用PHP版本來工作。 – user1148760

我有這個問題，讓我瘋狂了一陣子，試圖弄清楚。對我來說，這是一個異常與IE解釋行爲屬性......它的「行爲」是不同於CSS屬性中指定的所有其他URL。這是從CSS3PIE支持：

IE解釋相對於源HTML文件，而不是相對於像每個其它CSS屬性的CSS文件的行爲屬性的URL。這使得調用PIE行爲不方便，因爲URL必須或者是：
- 從域根絕對 - 這使得CSS目錄之間不容易移動的 - 或者，
- 相對於HTML文檔 - 這使得CSS不容易在不同的HTML文件之間重複使用。

所以，如果你有根使用URL（ '/ PIE.htc'）您的PIE文件。我也需要使用URL（'/ PIE.php'）方法，所以如果你使用PHP，請嘗試。

來源

2013-05-06 08:39:25 KoZm0kNoT

CSS3PIE在IE中不工作

回答

相關問題