讓CSS正確顯示中文字體

即使網頁已經是用UTF-8編碼，有時候還是會遇到亂碼的問題…例如在CSS中使用中文字體：微軟正黑體、新細明體…等，這問題真的很無奈！每次遇到都還是要想辦法把它變成unicode！雖然javascript可以讓中文字體變成UTF-8的功能：

<script type="text/javascript">

var uri="微軟正黑體";

document.write(encodeURIComponent(uri));

</script>

但CSS本身無法使用javascript…

這時候FireBug的指令列(Show Command Line > Command Line)就變成了我們的小幫手，可以幫我們達成中文字轉成unicode編碼的要求！只要在指令列使用「escape()」功能：

假設我們要CSS正確顯示「font-family:微軟正黑體;」，

在指令列用escape指令輸入「微軟正黑體」：

escape('微軟正黑體')

可以得到底下的回應：

%u5FAE%u8EDF%u6B63%u9ED1%u9AD4

再把所有的「%u」全取代成「/」(反斜線)就得到：

\5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4

上面一串奇怪的數字加英文，就是我們要的unicode編碼！

將它取代原本的「微軟正黑體」：

font-family:\5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4;

瀏覽器就可以正確顯示CSS中的「微軟正黑體」了！

另外，在Chrome、IE以及Safari的「開發人員工具」中，都有「主控台(Console)」可以使用「escape('中文字')」的功能，我覺得還滿不錯用的！

CSS: 推薦20個CSS的密技！

好一陣子沒寫部落格，最近好像常遇到幾個明明就是很久以前的東西，但直到現在卻都仍舊有效的事情！公司專案管理的模式是如此，沒想到CSS的密技也是一樣好用到現在…

底下這兩個推薦連結，雖然都是英文網站，但懂CSS語法的人應該看得懂它在寫什麼！文章建立的時間都是4、5年前(一個是2005年，另一個是2006年)，也許是久了一些，可是很多CSS的東西到現在也都一樣好用！所以，這真的是太神奇了(orz)！

．Ten CSS tricks you may not know(十個你可能不知道的CSS密技！)
‧Ten more CSS tricks you may not know(另外十個你可能不知道的CSS密技！)

裡面提到了很多我們在用CSS製作網頁時常用到的一些小技巧！有時候自己也會忘記或沒注意到，所以我覺得還滿實用的，也寫得非常棒！推薦大家趕快把密技學起來！省下鬼遮眼的時間，就是你多出來開心愉悅的時間！

CSS：讓背景影像水平垂直置中

當我們製作了一個小而精緻的網站時，網頁的內容範圍不大，因此我們可能會希望讓背景圖案能水平、垂直皆置中；一般來說，直覺的寫法可能是：

background:#111111 url(../images/bg.gif) no-repeat 50% 50%;

不過，當你以各種不同的瀏覽器檢查時，可能會發現…其實有些瀏覽器只有水平置中而已，垂直的位置並未置中(不是落在50%的地方)，所以畫面會有問題…有一個很簡單的方法可以輕鬆解決這個問題：增加background-attachment為fixed的屬性，即「background-attachment:fixed;」，便可讓背景圖案真正的水平、垂直皆置中：

background:#111111 url(../images/bg.gif) no-repeat fixed 50% 50%;

AS2呼叫Javascript隱藏(/顯示)指定的Div

有時候我們會在yahoo或其它網站看到Flash的廣告banner在畫面中播放完後自動向上收回去，這效果滿有趣的，因為你可以讓大家看到一個比較完整的廣告效果，然後向上縮回，只留下另一個小廣告banner在同一個位置，不會讓大的廣告banner一直佔據網頁的空間。

其實，這只是在同一個地方放了兩個banner，一個大的、一個小的，播完大banner以後再留下小banner；我們可以用兩個div分別置放大、小banner，然後把播完廣告的大banner在畫面中刪除！

或者，也可以在同一個swf檔裡做兩個banner，在播完大banner之後，讓時間軸跳到小banner的地方，不讓別人看到原來大banner的畫面。

不過，這些都不是困難的問題，我們比較好奇的是，是什麼原因讓大banner播完後，Firefox竟然忘不了這個大banner曾經播放過的事實，因此留下原本大banner的「透明」區塊在畫面之中？！也許這層透明區塊不會對畫面造成影響，但另一個問題是…區塊底下的東西竟然無法點選、連結？！這個可麻煩了！真不知道該怎麼辦才好…

沒關係，感謝Javascript和CSS的強大功能，因為我們可以在Flash中呼叫Javascript功能，讓Javascript使用CSS設定，讓指定的Div消失於無形～！哈哈哈！！！

首先我們要讓Flash在特定的時間或事件之中觸發Javascript機制，例如播完影片之後，或者因為我們已經看過這個畫面，不想再看了！於是，我們可以在時間軸中加上底下的Actionscript(AS2)：

getURL("javaScript:hideItem('hideThisDiv');","");
//讓Javascript知道要隱藏哪個Div

接著在html加入底下這段Javascript即可讓Flash自動隱藏起來：

<script type="text/javascript">
<!--
function hideItem(divID) {
hiddenID = document.getElementById(divID);
hiddenID.style.display = "none";
}
//-->
</script>

既然Javascript是用CSS的方式將Div隱藏起來(display:none;)，我們同樣也可以把它叫出來，只要將「none」改為「block」(或其它非none的參數應該都可行)：

hiddenID.style.display = "block";

修正舊版瀏覽器無法正常顯示PNG的問題

舊版的IE瀏覽器(6.0, 5.5, 或更早的版本)並不完全支援PNG格式圖片的顯示，因此會在透明PNG圖片的周圍產生一片淡藍色的區域；常更新軟體的人可能不會發現，但對於電腦「不過就是一個東西放在那邊」的人來說，他們可不管這麼多…雖然如此，我們還是得要照顧到他們，所以…底下是google到的一段程式碼，只要把它放進Head裡面，就可以讓舊版瀏覽器也能正常顯示透明PNG囉！

<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()

if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText

if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle

var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;"
+ imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"

img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

Flash底下硬是長出空白背景區域！？

昨天在做網頁的時候發現了一個奇怪的現象，就是Flash的物件在IE6底下看起來很正常，但在Firefox上卻不是那麼一回事；也許你會說這是瀏覽器的不同，但是怪就怪在這東西的組成一點兒都不難，就是表格中由上而下放了兩個Flash，最底下只放一張圖，完全是一整個簡單到不行！但是卻讓我怎麼也想不透原因！為什麼Firefox硬是要在底下多出幾個像素的空白，竟然把我要的畫面撐破了！

後來才知道，也是推測最可能的原因是「Object」標籤的問題。有時候Firefox會把<Object>視為「行內(inline)」元素，也就是當作一般的文字來看待；既然是文字，就會有文字應該有的高度、大小等實體空間的存在。

如果我們把行高與字體大小皆設為0也可解決這個問題！不過，還有另一個方法，就是把Object的display屬性設成是區塊(block)，只要用CSS指定如下即可：

object{
display:block;
}

設為區塊屬性(display:block)之後，該區域在Dreamweaver 8.0的設計模式中會產生雙倍高度的怪異現象…也就是明明只放了一個Flash元件，但Dreamweaver看起來卻是兩個一樣的東西上下黏在一起！

由於之前都未曾遇到Flash元件object所造成的問題，因此我也不排除公司軟體老舊的因素…(一直很期待公司能給我換新電腦、新軟體…orz)。

用CSS將網頁的內容水平與垂直置中

有時候我們想讓網頁的內容隨著使用者將瀏覽器的範圍放大或縮小，都可以自動置中；如果用表格的話，其實就可以很簡單的做到這個功能，但使用CSS來建構網頁會比透過表格的方法來得好多了！因為CSS不但在語義上，甚至是各種控制的方式都比表格靈活許多！

以底下這個例子來說，我們要將網頁的內容放進div裡，設定div的id為"theDiv"，假如寬、高為800px、450px，那麼我們也得將寬高指定進來！透過position為absolute的方法，指定div的位置在垂直與水平皆為50%；由於絕對定位(position:absolute)是以div的左上角為依據，所以這個時候位置並不是直正的水平與垂直置中，我們還得透過指定margin(邊界)的方式來達到這個功能，也就是將寬、高各減去一半(寬減去450/2=225px，高減去800/2=400px)，這樣就會自動的水平與垂直置中了：

#theDiv {
height: 450px; /* div的高度 */
width: 800px;/* div的寬度 */
position: absolute;
top: 50%;
left: 50%;
margin: -225px 0 0 -400px;/* 邊界減去一半的寬高 */
}

也許CSS有其它方法能做到類似的功能，不過這個方法算是滿簡單易懂的就是了。

你也可以當CSS的按鈕設計師

一個小有趣的網站：CSS Button Designer，專門做按鈕的…CSS的按鈕。

用Javascript確保網頁在IE6看起來跟IE7一樣

很多人都遇到過網頁在IE7看的時候是正常的，但在IE6或其它舊版IE上看卻很怪的情形。或者，剛好相反…

所以Dean Edwards編寫一個javascript庫，加強舊版IE(IE6、IE5)，讓它們看起來就相容於標準瀏覽器，它同時修復了舊版IE(IE5、IE6)許多的CSS問題，也讓透明png能正常使用。

目前這個javascript放在google伺服器上，所以Dean會幫我們更新。

更棒的是，他允許我們用"hot-link"的方式，直接連到google伺服器(http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js)。

CSS：簡單解決「飄浮(float)」的問題

當我們在Div裡面再放進不同的Div的時候，只要你有使用 "float" (float:Left;或float:Right;)這個屬性的話，常常會發現外面的Div立刻就會忘記自己裡面還有其它的小Div…所以會變成「外面的Div是外面的Div、裡面的Div是裡面的Div」，好像沒什麼關係似的！？

到底應該怎麼弄才能讓外面的Div想起來自己應該要隨著裡面的Div來調整高度呢？畢竟它們是有連帶關係的！不能因為裡面的Div會飄來飄去的就不予理會呀~！？

其實是有幾個解決的方法，例如W3C就建議用額外的標籤來解決這個問題：在裡面最後的一個Div底下，加上強制換行的 BR 標籤，並且在裡面加入 Style="clear:both" 屬性；如此一來，就可以解決這個問題了！

不過，這會讓我們的程式碼看起來有點兒多餘！有別的方法嗎？

有，用假類別(pseudo class) ":after" 屬性一樣能達到同樣的目的！不過…那很複雜！

目前最簡單也最直接的方法，是由英國的Paul O'Brien所發現！只要把外面的Div加上 "overflow:auto;" 屬性，外面的Div就會知道…原來裡面有其它的Div存在！真的是很神奇！

Alex Walker在SitePoint.com的Simple Clearing of Floats以及Peter-Paul Koch在QuirksMode.org的Clearing Floats都有更詳細的圖示與說明。

IE6自動將你Div的Margin加倍！不管你要或不要…

如果你的Div具有 float 屬性的話，可以讓你的Div向左或向右「飄移」對齊，但在IE6底下卻會讓Div的margin加倍！這是IE6的一個小bug。解決這問題的方法就是把Div加上底下的屬性：

display:inline;

如此就不需要再針對IE6來調整你的Div了，這會省下很多時間唷！

CSS也有圖層遮罩功能！

今天在iBloom Studios上看到了「Misunderstood CSS Clip (誤解的CSS Clip功能)」這篇文章，才注意到原來CSS也有一個像Photoshop Layer Masker(圖層遮罩)的功能，語法如下：

div { clip: rect(5px, 40px, 45px, 5px) }

如果想進一步了解的話，這個網頁有很詳細的說明！嗯…又多學了一樣東西！

沒辦法用CSS來做EDM發給別人…

這幾天做了一個EDM，是一個用CSS語法構成的網頁，修了又修，改了又改，最後要用電子郵件寄出的時候，才發現，這根本就不能用！並不是說EDM做得不好，但是在Outlook的寄出預覽下觀看的結果，只能用四個字來形容：「支離破碎」！

怎麼辦呢？它根本就不讀取我的CSS語法，沒辦法，最快的方法就是重做！我馬上用Photoshop把版面輸出成網頁，用表格(Table)做成網頁，稍微調整一下，不用一個小時就把樣子弄好了，剩下的就是微調與細心的修整…

真的沒辦法用CSS來做EDM發給別人嗎？！

CSS：Hacks For IE6/IE7/FireFox

有時候我們在用CSS樣式表來製作網頁的時候，常常會發現在不同的瀏覽器裡面看到的樣子是不一樣的，最常遇到的就是IE6、IE7、FireFox之間的差異了。FireFox是採用網頁標準規範來製作的，能準確的解析出網頁標準格式；但IE6和IE7就不是這個樣子了，它們對於網頁標準的規範不如FireFox準確，而且同樣都是IE瀏覽器，不同的版本讀出來的東西竟然也不一樣！像IE6和IE7就不同，這很令人頭痛！

經過一段的測試，我無意間發現了一個方法，可以讓IE6/IE7/FF都能正常作用！只不過，這個方法可能已經有人比我早發現了！

今天我在找這個方法的時候，發現其實還是有很多網站有不同的寫法，但我認為最簡單的方法(和我用的方法一樣的…)，首先在awflasher.com的「解决IE6、IE7、Firefox兼容最简单的CSS Hack」上看到，不過他是在cmsproducer.com的Creating different CSS style selector definitions for different browsers (Firefox, Internet Explorer 7 and IE 6.0)上看到的。方法如下：

#yourDiv{
　padding:100px;
　#padding:200px;(#也可用*替換)
　_padding:300px;
}

意思是…"yourDiv"這個id，在FF(FireFox)的padding會顯示為100px的距離，在IE7是200px，在IE7版本以下(IE5、IE6)則會是300px。

換言之，FF只會讀取正確的語法，而不會讀取#或_開頭的語法；但IE7則會把#(或*)開頭的語法也讀進去，但略過_(底線)開頭的語法；IE7以下的舊版IE則會略過#開頭的語法，繼續讀取_開頭的語法。一般來說，愈後讀取的語法愈優先表示出來。

其它還有將IE7會讀取的#號換成+號或*號的，也可以去試試。

我把一些不錯的相關連結列在底下，提供參考：

• 解決IE6、IE7、Firefox兼容最簡單的CSS Hack
• CSS 處理不同瀏覽器畫面錯亂問題
• CSS Hack
• Will the browser apply the rule(s)?