最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

使用PIE.htc讓IE678支持CSS3部分屬性_html/css

來源:懂視網(wǎng) 責編:小采 時間:2020-11-27 16:40:37
文檔

使用PIE.htc讓IE678支持CSS3部分屬性_html/css

使用PIE.htc讓IE678支持CSS3部分屬性_html/css_WEB-ITnose:萬惡的IE內(nèi)核瀏覽器,這是多少前端程序員頭疼的事情。今天給大家介紹一下如何用 PIE.htc 來讓IE瀏覽器支持CSS3的border-radius、box-shadow、CSS3 Backgrounds (-pie-background)、Gradients、RGBA屬性。 會的朋友提供一下建議,不會的朋
推薦度:
導讀使用PIE.htc讓IE678支持CSS3部分屬性_html/css_WEB-ITnose:萬惡的IE內(nèi)核瀏覽器,這是多少前端程序員頭疼的事情。今天給大家介紹一下如何用 PIE.htc 來讓IE瀏覽器支持CSS3的border-radius、box-shadow、CSS3 Backgrounds (-pie-background)、Gradients、RGBA屬性。 會的朋友提供一下建議,不會的朋

萬惡的IE內(nèi)核瀏覽器,這是多少前端程序員頭疼的事情。。今天給大家介紹一下如何用 PIE.htc 來讓IE瀏覽器支持CSS3的border-radius、box-shadow、CSS3 Backgrounds (-pie-background)、Gradients、RGBA屬性。

會的朋友提供一下建議,不會的朋友學習一下。

下載地址:PIE.htc

要使用 PIE 應用就要先把它引進來,這里不是在 html 文件里面引入,而是在 css 文件里面使用 behavior 來對文件進行導入。這里會涉及到一個路徑的問題。比如 當前文件在“/”下 ,CSS文件在“/CSS”下,PIE.htc在“/CSS”下,behavior: url(/css/PIE.htc)而不是behavior: url(PIE.htc) 。

ps :PIE.htc URL路徑是相對于當前HTML文件,不是CSS文件.

以下代碼都是基于下面這段公共的樣式進行編寫:

div{text-align: center;border: 1px solid #204D74;width: 200px;height: 100px;line-height: 100px;}

1. border-radius 圓角

.borderRadius{ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background: #ABCDEF; behavior: url(css/PIE.htc);}

運行效果圖

ps :不支持單邊的圓角屬性,比如: border-top-left-radius,但是你可以這樣來寫:

.borderRadius{ border-radius: 0px 20px 0px 20px; -webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; background: #ABCDEF; behavior: url(css/PIE.htc);}

運行效果圖

2 . box-shadow 盒子陰影

.boxShadow{ box-shadow: 10px 10px 10px #000; -webkit-box-shadow: 10px 10px 10px #000; background: #ABCDEF; behavior: url(css/PIE.htc);}

運行效果圖

3 . CSS3 Backgrounds 背景漸變

.linearGradient{ background: -webkit-gradient(linear, 0 0, 0 100%, from(#0000FF) to(#ABCDEF)); /*old webkit*/ background: -webkit-linear-gradient(#0000FF, #ABCDEF); /*new webkit*/ background: -moz-linear-gradient(#0000FF, #ABCDEF); /*gecko*/ background: -ms-linear-gradient(#0000FF, #ABCDEF); /*IE10*/ background: -o-linear-gradient(#0000FF, #ABCDEF); /*opera 11.10+*/ background: linear-gradient(#0000FF, #ABCDEF); /*future CSS3 browsers*/ -pie-background: linear-gradient(#0000FF, #ABCDEF); /*PIE*/ behavior: url(css/PIE.htc);}

運行效果圖

ps :只支持linear-gradient(線性漸變)

4 . RGBA

.rgba{ background: rgba(0,0,0,.6); -pie-background: rgba(0,0,0,.6); behavior: url(css/PIE.htc);}

黑色背景,透明值為60%

ps:不支持box-shadow

5 . IE6 下的 png 圖片的透明問題

.png img{ -pie-png-fix: true; behavior: url(/PIE.htc);}.png{ background-image:url(img.png); -pie-background:url(img.png); behavior: url(/PIE.htc);}

ps:圖片直接用-pie-png-fix: true,背景圖片使用-pie-background來修復IE6下png透明的問題

由于我這邊沒有IE6內(nèi)核的瀏覽器,所以這個就無法測試給大家看了,要是有興趣的可以自己試試看。不過我覺得這個也沒有那么重要了,畢竟IE6基本都被舍棄了,現(xiàn)在很多公司最舊的版本也就兼容到IE7,再老的就變成老古董了。

6 . background-size 背景包含補充

.backgroundSize{ background:#ABCDEF url(wait.png) center no-repeat; background-size: contain; /*behavior: url(css/backgroundsize.min.htc);*/ behavior: url(css/backgroundsize.min.htc);}

沒有加htc的效果

加htc運行效果圖

框框的寬高的是200x100,圖片的寬高是180x180,這樣圖片的高就超過了框的邊界,如果使用背景圖片就要使用到background-size來讓背景圖片被包含,但是IE9以下是不支持的。

caniuse.com

以上的是我暫時對PIE的用法的一個理解,要是有更多的用法,請給我留言!如有更多知識,會繼續(xù)補充!

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

文檔

使用PIE.htc讓IE678支持CSS3部分屬性_html/css

使用PIE.htc讓IE678支持CSS3部分屬性_html/css_WEB-ITnose:萬惡的IE內(nèi)核瀏覽器,這是多少前端程序員頭疼的事情。今天給大家介紹一下如何用 PIE.htc 來讓IE瀏覽器支持CSS3的border-radius、box-shadow、CSS3 Backgrounds (-pie-background)、Gradients、RGBA屬性。 會的朋友提供一下建議,不會的朋
推薦度:
標簽: 使用 htc IE
  • 熱門焦點
專題
Top

抖音扫码关注

手机端二维码

每天分享百科知识!