指南針和PIE似乎不起作用

我使用Compass來創建網頁CSS樣式。我想使用像border-radius和linear-gradient這樣的CSS3功能，但Internet Explorer拒絕合作。指南針和PIE似乎不起作用

我編寫這樣說：

$pie-behavior: url("../stylesheets/PIE.htc"); 
// I've tried 'stylesheets/PIE.htc' and '/pink/stylesheets/PIE.htc' (all webpage is in folder 'pink'). 
$pie-base-class: pie-base; 

.pie-base { 
    @include pie-element(relative); 
} 

body { 
    @include pie; 
    @include background(
     image-url('header_background.png') no-repeat top center, 
     linear-gradient(top center, 
     $bg-gradient-start, $bg-gradient-stop 
    ) no-repeat, 
     image-url('wavy-white.jpg') 
    ); 
}

這有什麼錯呢？

來源

2011-11-21 Hauleth

我發現cssPIE不理解rgba的值，所以我的想法從顏色漸變到透明不應該工作：/也IE瀏覽器不明白在CSS樣式內嵌SVG，所以即使該功能不加工。所以唯一的辦法是爲IE製作另一種風格，並從所有漸變元素中刪除漸變：/

來源

2011-11-30 17:44:16 Hauleth

您是否曾嘗試在.htaccess中添加適當的MIME類型？像這樣：

AddType text/x-component htc

來源

2011-11-24 15:25:55 Krimo

是的，我用'捲曲-I HTTP chcecked它：//localhost /粉色/ stylesheets/PIE.htc'，我有'Content-Type：text/x-component'。另外我使用的是Nginx，而不是Apache。 – Hauleth

也許看看這個：http://stackoverflow.com/questions/8138464/how-to-configure-htc-files-to-work-on-nginx – Krimo

不幸的是：'$ cat/etc/nginx/conf/mime。類型| grep htc'產生'text/x-component htc;' – Hauleth

我的測試方法是：

1/是PIE.htc通過IE瀏覽器發現了什麼？ PIE documentation指出：

注意：此路徑相對於正在查看的HTML文件，而不是從中調用的CSS文件。

爲了驗證是否在你的羅盤文件中指定的目錄是OK，你可以在同一個目錄中添加圖像，並嘗試將其顯示爲一個HTML圖像，是這樣的：

<body><div> 
    <img src="stylesheets/yourtestimage.png" alt="If you can read this, it failed" width="400" height="400"> 
</div></body>

那麼應該清楚這個目錄是否合適:)

2/然後嘗試一些簡單的CSS規則，沒有指南針代碼，以避免可能由Compass引起的問題，而不涉及PIE 。例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
    <title>PIE and border-radius</title> 
    <style type="text/css"> 
    p { 
     width: 400px; 
     height: 100px; 
     line-height: 100px; 
     vertical-align: middle; 
     text-align: center; 
     color: yellow; 
     background-color: darkgreen; 
     border-radius: 5px 6px 7px 8px; 
     pie-border-radius: 30px; /* shouldn't be necessary but just in case ... Please test with and without this prefixed property */ 
     behavior: url(***/PIE.htc); 
    </style> 
</head> 
<body> 
    <p>this paragraph should be rounded in lesser IE</p> 
</body> 
</html>

3/添加其他CSS3指令一個接一個，仍然在沒有羅盤代碼CSS。 background不會被PIE解析，你必須使用-pie-background（不知道你的Compass是否生成了這個？）。首先一個簡單的沒有多背景線性漸變：

p { 
    /* (...) */ 
    -pie-background: linear-gradient(#F44, #400); /*PIE*/ 
    /* (...) */ 
}

那麼多背景：

p { 
    /* (...) */ 
    -pie-background: url(***/small_or_transparent_image1.png) left top no-repeat, 
        url(***/repeating_image2.png) left top repeat, 
        darkgreen; 
    /* (...) */ 
}

最後一個組合：

p { 
    /* (...) */ 
    -pie-background: url(***/small_or_transparent_image1.png) left top no-repeat, 
        linear-gradient(#F44, #400), 
        darkgreen; 
    /* (...) */ 
}

BTW，是您multibackground成功地顯示在Firefox和帶-moz-linear-gradient的webkit瀏覽器等等？ generator from Colorzilla可以幫助你處理所有這些前綴（對於Compass的下一步，它恰巧通過「切換到scss」來支持它的格式，以防你不知道的情況）。

4/然後在您的Compass文件中添加變量和scss代碼。我無法幫到你，我使用LESS或純CSS。你應該根據你的Compass代碼檢查生成的CSS：後者是否會生成你想要生成的CSS？

來源

2011-11-25 23:11:19 FelipeAls

我發現cssPIE很難處理。當我把它，我用JS實現，而不是HTC執行：

<!--[if lte IE 8 ]> 
    <script src="/js/libs/PIE.js" type="text/javascript"></script> 
<![endif]-->

這裏是我的現實世界的例子：http://www2.highpoint.edu/

來源

2011-12-01 13:53:38 Teddy

指南針和PIE似乎不起作用

回答

相關問題