之前會為了解決IE6,IE7不符合W3C Standard實作所造成的layout問題，特地加了些CSS Hack來解決，但隨著Micro$oft的良心發現，IE8已經有"改邪歸正"的趨勢了，所以反而造成layout亂掉的問題，所以若能用IE8開啟，但模擬IE7的行為的話，就能暫時解決問題..算是一個workaround的solution，參考看看吧，在<head>中加上以下這行即可<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
參考資料來源：IEBlog:
1. http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx
2. http://blogs.msdn.com/ie/archive/2008/08/27/introducing-compatibility-view.aspx
Click Here to Close
※1.排序(Sort) : 點擊標題 2.快速顯示某項分類(Label) : 點擊分類名稱
Click Here to Close
Tags Cloud
My Secret Notebook (我的火星文記事本)
※請點擊此連結開始解讀火星文記事本(Click here to Decode):
c5X3jlpV7oPRK7T4atrTXlF8I2KtF+UkIlezLVtCdoxLReWF
mm0NiDU82M4jV6t2RBCBrz25cuC9sjNwAuamtlEmcM1VguTu
hVs5vX7xayeXoDLwLRIsXDdxVSYNoZecdMY16+hwqpbgm2ch
78a90t0Gr9zL74TcZYwjdl3BbmnCRBJjD88dRHxdcPqIiDGp
zWe9q/XdSxe6yXKdh/hwQJ+D+o6XPWboby+RmoOtn9wmdQnN
o8h7BKWLQQMO+5XEV0RDZmUO3X7ADN8bzC8JmhP1BVP2V80d
Fs3ohWPSt7UBKnHCwI5tyeakRQihDKCzfiP7F0J+spSxCSlR
PqAj0w88PWB2ax8Y2++K/XMFHF6VuSeRhSMCaExmTTLqngxc
WlEA551OvUriquyW8QQc6jVg8lQn4m4H78QgUPvc2F3LsYKm
fd9HLa+mXrnTgh4SfgyUmS84BZdoGpMbfM4OpuWgFVZcN2e/
uKhuJm7md4G0wyo7efCLPwWWWqxZG8yzwQAHDQr5p/3xZeX4
qjMXzpXiwCqLzTGbZPqx9XMDqtrardSQNAw3dJgxgWALNzyu
/OOiDZGnobvYgDXDRuMQHo1k7gvSR7J+SNIbw7cd4696ChIL
c97GW+hdMcpTOcK9dhIKK8tXDJxiM7OSA28KCN4Wn3N1iJ9y
w4Y6W4GqbSiRxrze5zwOGeG5SbvrYvJ4LSDgND6fszdE43uk
PoPKYyfg3r4JcwrcqDJXcv1jWDuLi1swUK8lXhLLA7Ahfl8a
r+3IJJ4bnUASn9UiEMRZsOKJvK83A/TVZTS5QTz9etA60x7T
67VlH432PnH/ktoaE1XmqhbFgZ7v9UD7ujgxFMYvJ7Y9dNcI
bd3iUVa9EmudYLEuw4Otze1lLL3NQgUb+NNjgKx7r6bUHdmZ
WW7V9g==
mm0NiDU82M4jV6t2RBCBrz25cuC9sjNwAuamtlEmcM1VguTu
hVs5vX7xayeXoDLwLRIsXDdxVSYNoZecdMY16+hwqpbgm2ch
78a90t0Gr9zL74TcZYwjdl3BbmnCRBJjD88dRHxdcPqIiDGp
zWe9q/XdSxe6yXKdh/hwQJ+D+o6XPWboby+RmoOtn9wmdQnN
o8h7BKWLQQMO+5XEV0RDZmUO3X7ADN8bzC8JmhP1BVP2V80d
Fs3ohWPSt7UBKnHCwI5tyeakRQihDKCzfiP7F0J+spSxCSlR
PqAj0w88PWB2ax8Y2++K/XMFHF6VuSeRhSMCaExmTTLqngxc
WlEA551OvUriquyW8QQc6jVg8lQn4m4H78QgUPvc2F3LsYKm
fd9HLa+mXrnTgh4SfgyUmS84BZdoGpMbfM4OpuWgFVZcN2e/
uKhuJm7md4G0wyo7efCLPwWWWqxZG8yzwQAHDQr5p/3xZeX4
qjMXzpXiwCqLzTGbZPqx9XMDqtrardSQNAw3dJgxgWALNzyu
/OOiDZGnobvYgDXDRuMQHo1k7gvSR7J+SNIbw7cd4696ChIL
c97GW+hdMcpTOcK9dhIKK8tXDJxiM7OSA28KCN4Wn3N1iJ9y
w4Y6W4GqbSiRxrze5zwOGeG5SbvrYvJ4LSDgND6fszdE43uk
PoPKYyfg3r4JcwrcqDJXcv1jWDuLi1swUK8lXhLLA7Ahfl8a
r+3IJJ4bnUASn9UiEMRZsOKJvK83A/TVZTS5QTz9etA60x7T
67VlH432PnH/ktoaE1XmqhbFgZ7v9UD7ujgxFMYvJ7Y9dNcI
bd3iUVa9EmudYLEuw4Otze1lLL3NQgUb+NNjgKx7r6bUHdmZ
WW7V9g==
My Flickr
Showing posts with label IE. Show all posts
Showing posts with label IE. Show all posts
| [+/-] |
[IE8] IE=EmulateIE7 / 暫時解決IE8 layout問題 |
．Comment counts:
4 Comments
| [+/-] |
[CSS/htc] IE PNG Fix v2.0 Alpha 3 |
新版的IEPNGFix v2終於出來了，作者提到此版吸引人的Feature在於 "support for background position and repeat." Wonderful..，多了此項新功能大概能夠應付八九成的狀況了，IE6也可以不再那麼ugly了...囧rz!．資料來源： IE PNG Fix備註：之前發現同樣的code在本機端，以及某個HTTP Server上是可以work的，但有遇到某些HTTP Server卻無法work的情況，這是由於MIME TYPE不support所造成的問題，在原作者網頁以及http://support.microsoft.com/kb/306231這裡有提到，必需替.htc檔新增一項"text/x-component"的MIME type。
．載點: http://www.twinhelix.com/test/iepngfix.zip
．Comment counts:
0 Comments
| [+/-] |
[CSS/htc] IE5.5+ PNG Fix |
IE7下以不支援PNG圖檔的Transparent問題，也是存在很久、很令人困擾的問題。現在有個好東西，也是利用 .htc 檔來解決這個問題，雖說不是非常完美，但對於大多數的應用都已經有支援了。連Apple都有使用此一hack唷( http://www.apple.com/global/scripts/lib/iepngfix.htc )，看來算是個有口皆碑的好物呀。再來作個筆記，以後才不用再浪費時間Survey。※資料來源： IE PNG Fix
※Online Demo: 官網: http://www.twinhelix.com/css/iepngfix/demo/
※載點: http://www.twinhelix.com/css/iepngfix/iepngfix.zip
這個網站的作者，除了上面的IE PNG Fix之外，還分享了不少Open Source的好東西，有空可以來晃晃。
．Comment counts:
7 Comments
| [+/-] |
[CSS/htc] whatever:hove for IE |
當你遇到要在IE6上支援簡單不過的:hover事件時，發現這個大多數人使用的Browser竟然只能在<a> tag上使用:hover 囧囧囧...但是，IE有支援了一種所謂的 .htc 或 .hta 之類的behaviors檔，可以讓你針對某些Element在遇到某些事件發生時，反應出你所定義的行為。在IE6還沒消失在地球上之前，趕緊作個記錄，以後有機會用到。※資料來源： Whatever:hover
※Online Demo: 官網: http://www.xs4all.nl/~peterned/examples/cssmenu.html
這個站，真是將whatever:hover使用的淋漓盡致呀 : http://4umi.com/web/css/hover.php
．Comment counts:
2 Comments
| [+/-] |
[CSS] hideFocus Property |
如何避免超連結在點選時會出現"虛線外框"呢?! 因為我的Blog裡有一些由圖片組成的"Navigation Icon"及"Navigatin Bar"...所以一當點選此類連結時，便會出現預設的"虛線外框(如下圖)"，個人覺得那虛線相當的礙眼...XD，破壞整個美感!!
若你跟我有相同感受的話，那你就跟著底下作吧... :p
有底下兩種作法：
1. 針對單一超連結的作法: 加上 hidefocus="true" 屬性 (For IE only)
Example:<a href="http://www.google.com" hidefocus="true">Google</a>
2. 透過CSS的作法 (For IE & Firefox )
Example:<style>
a {noFocusLine:expression(this.onFocus=this.blur())} /* For IE, onFocus 的 F 要大寫*/
:focus {-moz-outline-style: none} /* For Firefox */
</style>
※若是使用Blogger的話，那就將方法2.的code加在</head>的上方即可 ^_^，若是別的Blog平台請自行摸索啦…
[UPDATE 2009/05/22] 資料來源 : http://www.wowbox.com.tw/blog/article.asp?id=3310<style type="text/css">
.wrap{position:relative;}
.btns{zoom:1;}
.btns *{outline:0;zoom:1;background:#f2f2f2;}
.btns button::-moz-focus-inner{border-color:transparent!important;}
</style>
<div class="wrap">
<div class="btns">
<button type="button">確定</button><button type="button">取消</button>
<a href="#">確定</a><a href="#">取消</a>
</div>
</div>
．Comment counts:
5 Comments
| [+/-] |
[Javascript] Selectable Post Font Size for your best view! |
之前有看到許多網站或討論區，有可以自行選擇顯示字型大小的功能，對於視力好的人來說或許字型小了些沒什麼影響，但有些老人家..(是我嗎..XD)，有時就會覺得看得有些吃力，若能迅速的讓字型放大，不用再花時間ReLoad頁面的話，將會是個很不賴的工具!!
※當然藉由按 Ctrl++/ Ctrl+- (for Firefox)，或者是Browser提供的放大縮小功能，不然就是通用的「Ctrl+滾輪上下滾」來達到放大縮小的功能，但我這個人比較龜毛，因為這兩種功能所表現出來的文字常常是破碎或是很醜，個人無法接受...時常因為這樣不逛那個站了…囧rz，並且透過上述的方式縮放頁面字型時，是所有版面的字型都會放大，也就連帶影響到Sibebar、Header...及其它非本文章內容的部份，整個網站當初設計好的版型都變了樣，喪失美感! 因此，我在此Blog中提供三種用於縮放文章內容的合適字型讓大家選擇(位於此處)!!
至於在Yahoo Taiwan的新聞裡點進每一篇新聞之後，也有提供類似這樣子的工具，But...他每次點換字級大小之後，都必需要 Reload 部份的頁面，明明可以不用Reload的，為啥他這麼作…後來發現，廣告部份也隨著Reload換新的了...囧rz，想必這是最主要的原因吧，那是他們吃飯的工具，就給他reload一下吧...XD!!參考資料來源：我根據上面所提供的的簡易版本，再修改成較適合於New Blogger版本 ^_^(當然再作適當的修改之後，其它Blog也都是可以套用的)。
懒人图库 LAYABOUT'S GALLERY
在修改的過程中，又遇到某個語法getElementsByName在IE中的話只對表單的物件有作用...OMG..IE sux again!!還好有底下這位大哥的教學，解救了我...感恩!!參考資料來源：於是，最後完整版的Javascript code (IE & Firefox 都正常) 就變成底下：
IE vs. FireFox 系列 - getElementsByName問題
[Updated 2006-12-26] 針對留言中Benjamin網友所遇到的問題，在這裡提醒大家，貼底下code時應注意的事項：由於Blogger在parse template語法有無錯誤時，他會檢查是否存在相對應的左括: <及右括: >，若不存在便會跟你說你的template語法沒有正確的close，導致儲存失敗。不幸的是，你若將Javascript嵌入template檔中，並且又很巧的，用到compare operator，例如：「小於:<」，如此一來他便會產生上述所提的，少了相對應的右括: >，而導語法錯誤啦! 因此，大家若要將底下這段javascript嵌入template中的話，記得將裡頭的<置換成<
之後，因為我只讓本文內容(Post.body)的字型大小可供縮放，因此編緝template內容，將裡頭找到的所有<script type='text/javascript'>
function getElementsByName_iefix(tag, name) {
var elem = document.getElementsByTagName(tag);
var arr = new Array();
for(i = 0,iarr = 0; i < elem.length; i++) {
att = elem[i].getAttribute("name");
if(att == name) {
arr[iarr] = elem[i];
iarr++;
}
}
return arr;
}
function doZoom(size)
{
var zooms = getElementsByName_iefix("span", "zoom")
for (var i = 0; i < zooms.length; i++) {
zooms[i].style.fontSize = size+'px';
}
}
</script>
都置換成底下的樣子<p><data:post.body/></p>
如此，就可以將被 name='zoom' 的span tag包住的那些內容，賦予字型縮放的功能!!<span name='zoom'><p><data:post.body/></p></span>
最後在將你要提供此項功能的界面，填入此段程式碼即可，裡頭的數字以px為單位：<a href="javascript:doZoom(16)">大</a>※展示出來的功能，請參照此圖，並加以操作看看…
<a href="javascript:doZoom(14)">中</a>
<a href="javascript:doZoom(12)">小</a>
．Comment counts:
58 Comments
| [+/-] |
[Browser] Browser Compatibility Notes |
因為之前我在這個Blog裡頭加了一個Javascript語法，為了達到[Blog Plugins]中的customizable tooltips效果，在Firefox中正常，但是在IE底下卻出現了 "Internet Explorer 無法開啟網際網路網站，操作已終止[Example]""，Oh My God...什麼鳥呀 XD! 對於javascript不熟的我，懶得花時間去Debug了，於是想辦法讓這段Javascript語法在IE中不要執行，方法如下：
． Conditional comment: (for css, xhtml, javascript)<!--[if IE]>
All IE browser
<![endif]-->
<!--[if IE 6]>
IE 6
<![endif]-->
<!--[if IE 7]>
IE 7
<![endif]-->
<!--[if lt IE 7]>
IE 6 以下 (含)
<![endif]-->
<!--[if !IE]> -->
IE 4 或 其他 browsers
<!-- <![endif]-->
．Conditional compilation: (only for Javascript)<script type='text/javascript'>
/*@cc_on @*/
/*@if (@_jscript_version >= 5.7)
// IE7 或以後
@elif (@_jscript_version >= 5.6)
// IE6
@elif (@_jscript_version >= 5.2)
// IE5.5
@elif (@_jscript_version >= 5)
// IE5
@else @*/
// 其他 browser ,例如 Firefox, safari, IE 4.x
/*@end
@*/
</script>．以上資料參考來源:
Xexex's Java 和其他二三事 : Browser相容性技巧筆記
[2007/03/21 Updated]div#milkr{width:200px;} /*-for ff-*/
* html div#milkr{width:180px;} /*-for ie6-*/
*+html div#milkr{width:150px;} /*-for ie7-*/
．Comment counts:
0 Comments
Subscribe to:
Posts (Atom)
