糖果の入口網站 - 修正IE全系列 radius shadow opacity、PNG bug測試頁面



糖果自我挑戰,

把圖片採用CSS向量定位~

讓不同解析度的使用者都可以享有完整的水族箱XD

素材來自楓之谷水世界...從WZ檔案取出...逃

會不會哪天糖果用CSS和HTML5設計出一款web2.0楓之谷?....

糖果突破了IE6 png 透明通道問題XD

還有IE系列無法使用半透明效果修正~

採用IE6原生透明通道使用法....

以上是火狐的顯示裝況!!

火狐顯示的效果最為優秀~

糖果の入口網站

同樣的網站我在小島導覽也有放上喔!!

以上是Chorme的展示!!

CSS3效果都有呈現,

但是文字有點位移....

這是Android手機上的展示

沒想到手機顯示的效果是最棒的...

都想要設定為桌布了=口=|||

這是悲劇的IE9,

沒想到正式推出,

圓角功能還是悲劇阿...

有修正方式,在特定情況IE會載入....所以我有留著...

另外透明效果~

filter:alpha(opacity=70);
opacity: 0.7;

要靠這招套用CSS~
這是70%的範例

至於悲劇的IE六,

我讓她可以透明PNG顯示,

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="pic/1.png", sizingMethod='scale');

把她加入IE專用CSS

<!--[if lt IE 7]>
<link rel="stylesheet" href="styleIE.css" type="text/css">
<![endif]-->

再利用IE only遊戲引導

<![endif]-->
<!--[if gte IE 7]><!-->
<link rel="stylesheet" href="style.css" type="text/css">
<!--<![endif]-->

最後再弄一個排除IE7以下(不含)還有其他瀏覽器可讀取的語法~
然後弄上標準語法

background: url("pic/1.png") no-repeat center;

這樣子就可以多瀏覽器相容XD

又讓他可以半透明....

唯獨下面點走板XD...

懶得改阿...=ˇ=|||

圓角沒有也是當然的=3=

但是有些人可以正常修復圓角,

所以糖果也寫出來,

首先下載http://fetchak.com/ie-css3/ie-css3.htc

 

然後與網頁放在一起...

<!--[if IE]>
<style type="text/css">
#search_area {
border-radius: 5px;
behavior: url(ie-css3.htc);
}

#link a {
border-radius: 5px;
behavior: url("ie-css3.htc");
}
</style><![endif]-->

在網頁裡直接寫入CSS圓角語法如範例方式~

一定要寫在HTML.....寫在css獨立檔案他無法運作...

記得要加上IE only語法,讓其他瀏覽器跳過IE的設定~

這樣子就大功告成了XD

不過我記得微軟的特色就是要方角...

新手機系統也是一堆方塊...

跟apple的圓角圖案唱反調XD



14 則迴響於“糖果の入口網站 - 修正IE全系列 radius shadow opacity、PNG bug測試頁面

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>