資訊專欄INFORMATION COLUMN
摘要：一能使支持的一些屬性，例如圓角，陰影等。具體的使用可詳見使支持圓角盒陰影與漸變渲染三的使用在網(wǎng)頁(yè)中加入腳本。注意，用專用的注釋，防止非瀏覽器下載。以下代碼在及以上瀏覽器可正常顯示。
一、PIE
PIE能使IE6-9支持CSS3的一些屬性，例如圓角，陰影等。它分為pie.htc和pie.js兩種用法。
二、pie.htc的使用在css片段里面加上behavior，例如
.logo{font-size:12px;behavior: url(path/to/pie_files/PIE.htc);}
需要注意的是， behavior 的路徑是相對(duì)html的，而不是相對(duì)所在的css文件。具體的使用可詳見PIE使IE支持CSS3圓角盒陰影與漸變渲染
三、pie.js的使用
在網(wǎng)頁(yè)中加入PIE.js腳本。注意，用IE專用的注釋，防止非IE瀏覽器下載。
用js調(diào)用
$(".purchase>a").each(function() {
$(this).css("position", "relative");//設(shè)置position屬性，否則無(wú)法覆蓋
PIE.attach(this);
});
注意點(diǎn)：
IE下這些CSS3效果實(shí)現(xiàn)是借助于VML，由VML繪制圓角或是投影效果的容器元素，然后這個(gè)容器元素作為目標(biāo)元素的后兄弟節(jié)點(diǎn)插入，如果目標(biāo)元素position:absolute 或是 position:relative，則這個(gè)css3-container元素將會(huì)設(shè)置與之一樣的z-index值，在DOM tree中，同級(jí)的元素總是后面的覆蓋前面的，所以這樣就實(shí)現(xiàn)了覆蓋，又避免了可能有其他元素正好插入其中。所以，如果目前元素的position屬性為static，也就是默認(rèn)屬性，則z-index屬性是沒(méi)有用的，無(wú)覆蓋可言，所以此時(shí)IE瀏覽器下CSS3的渲染是不會(huì)成功的。要解決也很簡(jiǎn)單，設(shè)置目標(biāo)元素position:relative或是設(shè)置祖先元素position:relative并賦予一個(gè)z-index值（不可為-1）。
添加陰影時(shí)，需設(shè)置一個(gè)背景色。否則，陰影將會(huì)覆蓋整個(gè)背景。以下代碼在IE9及以上瀏覽器可正常顯示。
.dis_a:hover {
box-shadow: 0px 5px 30px rgb(204, 204, 204);
transform: translate3d(0, -8px, 0);
-webkit-transform: translate3d(0, -8px, 0);
cursor: pointer;
}
但是在IE9以下瀏覽器，使用PIE.js制作陰影效果如下。陰影似乎覆蓋了整個(gè)背景。
但是在以上的CSS代碼中添加一個(gè)白色的背景色時(shí)，`background: rgb(255, 255, 255);`,能正常顯示陰影
實(shí)現(xiàn)背景透明度需要在js中額外添加一行代碼，同時(shí)css中額外添加 -pie-background: rgba(60, 125, 166, .9);才能實(shí)現(xiàn)。
$(".nav_bg").each(function() {
PIE.attach(this);
$(this).prev("css3-container").css({
"filter": "alpha(opacity=0.9)",
"opacity": 0.9
});
});
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/111650.html
摘要：下的兼容問(wèn)題處理背景透明，圓角，和支持部分選擇器例如支持的語(yǔ)義化標(biāo)簽，媒體查詢等。在頁(yè)面頭部?jī)?yōu)先加載需要的插件，因?yàn)椴糠植寮枰蕾囁孕枰钕燃虞d。注意順序，插件優(yōu)先添加。這個(gè)路徑是相對(duì)的路徑。 ie8hack ie8下的兼容問(wèn)題處理：背景透明，css3圓角，css3和jquery支持部分css3選擇器（例如：nth-child）,支持html5的語(yǔ)義化標(biāo)簽，媒體查詢@media等。...
摘要：下的兼容問(wèn)題處理背景透明，圓角，和支持部分選擇器例如支持的語(yǔ)義化標(biāo)簽，媒體查詢等。在頁(yè)面頭部?jī)?yōu)先加載需要的插件，因?yàn)椴糠植寮枰蕾囁孕枰钕燃虞d。注意順序，插件優(yōu)先添加。這個(gè)路徑是相對(duì)的路徑。 ie8hack ie8下的兼容問(wèn)題處理：背景透明，css3圓角，css3和jquery支持部分css3選擇器（例如：nth-child）,支持html5的語(yǔ)義化標(biāo)簽，媒體查詢@media等。...
摘要：第二個(gè)子節(jié)點(diǎn)第三個(gè)子節(jié)點(diǎn)以此類推盒子陰影失效盡管背景是白色，最好還是設(shè)置一下，不然兼容后的效果可能會(huì)不太理想透明色失效有默認(rèn)在文件中控制一下就好了，如順便介紹一下過(guò)濾器，是一種用來(lái)過(guò)濾不同瀏覽器的類型。 一、火狐1. 失效hack：采用jquery UI：datepicker插件。（1）下載插件,放置在項(xiàng)目文件夾中；（2）在所需頁(yè)面引入，如： 此script與頁(yè)面所需的對(duì)應(yīng)的j...
摘要：第二個(gè)子節(jié)點(diǎn)第三個(gè)子節(jié)點(diǎn)以此類推盒子陰影失效盡管背景是白色，最好還是設(shè)置一下，不然兼容后的效果可能會(huì)不太理想透明色失效有默認(rèn)在文件中控制一下就好了，如順便介紹一下過(guò)濾器，是一種用來(lái)過(guò)濾不同瀏覽器的類型。 一、火狐1. 失效hack：采用jquery UI：datepicker插件。（1）下載插件,放置在項(xiàng)目文件夾中；（2）在所需頁(yè)面引入，如： 此script與頁(yè)面所需的對(duì)應(yīng)的j...
閱讀 3309·2021-11-24 10:43
閱讀 4283·2021-11-24 10:33
閱讀 3859·2021-11-22 09:34
閱讀 2185·2021-10-11 10:58
閱讀 3837·2021-10-11 10:58
閱讀 922·2021-09-27 13:36
閱讀 3650·2019-08-30 15:54
閱讀 3029·2019-08-29 18:41
