2011年7月6日

Opera 背景高度無法擴展

原因

若網頁內容高度比視窗高度少,內容底部至視窗底部的這一段有可能會是瀏覽器的預設背景色。(預設值通常會白色)

若使用 Fullscreen 功能再縮回,這一段背景會回復正常。但重新整理後又會出現兩塊背景。

解法

分別在 html 和 body 加上 min-height:100% 強迫擴展高度。

CSS 部份

html, body{min-height:100%;}

IE6 Overflow:hidden 失效

原因

CSS 部份

div#A{overflow:hidden;}
div#B{position:relative;}

HTML 部份

<div id="A">
    <div id="B"></div>
</div>

說明:這是 IE6 的 Bug。當子元素 B 設了 position:relative 後,父元素 A 的 overflow:hidden 會失效,B 區塊超出 A 的部份無法被隱藏。

解法

在父元素的 CSS 也加上 position:relative 即可。

div#A{
    position:relative;
    overflow:hidden;
}
div#B{position:relative;}

IE6 Bug: position:absolute 區塊消失

原因

CSS 部份

div#A{position:absolute;}
div#B{float:left;}

HTML 部份

<div id="A"></div>
<div id="B"></div>

說明:因為 IE6 自身的 Bug,若設了 position:absolute 的 A 後面緊接著設了 float 的 B,A 會消失不見。

解法

在 A 跟 B 之間夾一個空的 div,讓 A 不會緊臨著設了 float 的元素。。

<div id="A"></div>
<div></div>
<div id="B"></div>

若要寫得漂亮一點,只針對 IE6 的話可以用註解的方式:

<div id="A"></div>
<!--[if IE 6]><div></div><![endif]-->
<div id="B"></div>

2011年6月2日

IE 背景消失

有時候在使用 IE 內建的 Developer Tools 時,某 Element 的背景會不見;且無論 IE9 和 IE8 都會發生這種情形,若關閉 Developer Tools 背景又回復正常。爬了文發現這是 IE 本身的 Bug,跟 HTML 或 CSS 的寫法無關。

解法:在其父元素設定背景。

我這次遇到的狀況是 <body> 的背景不見,在 <html> 加上背景就回復正常了。

原來的 CSS Code

body{background:#000;}

改寫後的 CSS Code

html{background:#000;}
body{background:#000;}

在這個 Case 裡,<body> 的背景會把 <html> 的背景蓋掉,所以 <html> 的顏色隨便設就好。若將來遇到父元素不能有背景,也許可以使用 1x1 px 的背景去解決。不過我還沒時間試就是了。

2011年3月16日

改版面

截圖紀錄。

2011年1月17日

MSBT 顯示中文名稱教學

MSBT = MikScrollingBattleTex

步驟如下:

2010年9月13日

Flash 輸出較高品質透明 GIF 動畫檔

File → Publish Settings → Formats
檔案 → 發佈設定 → 格式

2010年7月6日

斷行與不斷行

強制斷行

    word-break:break-all;
    word-wrap:break-word;

強制不斷行

    word-break:keep-all;
    word-wrap:normal;

Property & Value 說明

    word-break /* IE */
        normal
        break-all
        keep-all
        
    word-wrap /* Firefox */
        break-word
        normal

Firefox 的表格斷字目前沒有解決方式,只能另設隱藏或任由它撐破。

2010年6月8日

position:absolute 根據何者定位?

總算搞清楚定位方式:

<div style="position:relative;" id="a">
    <div id="b">
        <div style="position:absolute;" id="c"></div>
    </div>
</div>

向上追溯到最後一個有設 position 的元素。以此例來說 #c 就是根據 #a 來定位,#b 因為沒有被設定 position 所以不會是 #c 追溯對應的元素。

2010年5月24日

刪除已被刪除文章的回應

感謝這位佛心來著的大大開發出這個小程式。
簡單說就是一個讓你找出所有回應的地方,小心別錯刪留言囉!

刪除 Blogger 留言 1.0

2010年4月6日

Video Inspector - 得知影片所需的 Codec

如圖所示,Video Inspector 會列出音訊和視訊所需的 Codec 資料並協助下載,若無法從官方網站下載去 Google 一下應該就有各 Codec 的安裝程式。

此為免費軟體,但要填寫簡單的問卷。可至官方網站下載,有正體中文版。

2010年4月2日

[OpenOffice.org] 將圖片合併到檔案中

工具列 → 編輯 → 連結,打開連結編輯工具。

選取欲合併的檔案後,按下右下方的「解開」(有些版本翻為「中斷連結」)。

Tip:按住 Ctrl 可一次選擇多個檔案、若要全選按 Ctrl+A 即可。

2010年2月25日

晶紅虛無和翡翠虛無一次達成 - Achievement Emerald Void & Ruby Void

此打法可達成「翡翠虛無」(Emerald Void)和「晶紅虛無」(Ruby Void)。一般稱五黃打法,就是五個人都選青銅龍(琥珀龍)而無紅龍或綠龍的組合。需在英雄模式下完成。

開場及虛無階段結束後

虛無(以下稱 Phase2 = P2),虛無階段就是王會變成沒辦法攻擊。

坦克:按 2 時間暫停 → 按 3 引導
其他:1 普攻連按

PS. 有人按 3 的情況下按 1 會讓王上 debuff

王身上的 debuff 疊 10 次之後

其他:按 3 引導

↓

坦克:看到四個人引導之後,按 1 攻擊後馬上按 3 引導

↓

其他:看到坦克引導後,馬上按 1 攻擊

時間暫停鍊

P1:坦(開場) → 補(第一次暫停結束後放) → DD1(自己看情況放)

↓

P2:大家閃,不要離王太遠,P2 結束後可以馬上攻擊

↓

P1:DD2(虛無結束後馬上放)→ DD3(暫停結束後放)→ 坦(自己看情況放)

↓

P2:大家閃,不要離王太遠,P2 結束後可以馬上攻擊

↓

P1:補(虛無結束後馬上放)→ DD1(暫停結束後放)→ DD2(自己看情況放)

↓

王掛了。

其他

攻擊時在中央圓盤上方打即可,這樣不小心死掉的話可以降落在地板上不會摔死。掉到地板後離開座騎還可以用自己的職業技能打王。

2009年11月26日

保密防諜,Google Chrome 提醒你。


真是幽默又實用!XD

你也可以自己開起來看:


設定 → 新增無痕式視窗 (Ctrl + Shift + N)

2009年5月26日

Illustrator:填色和筆畫

Case 1 填色被筆畫遮住,希望筆畫只顯示在填色外圍,而不遮住填色。
  1. 打開外觀面板。
    • 中文版:視窗 > 外觀
    • 英文版:Window > Appearance
    • 快速鍵:Shift+F6
  2. 把外觀視窗中的筆畫用滑鼠拖移至填色下方。

Case 2 分開筆畫和填色為獨立物件。
  1. 選取該物件。展開外觀。
    • 中文版:物件 > 展開外觀
    • 英文版:Object > Expand Appearance
    • 快速鍵:無。
  2. 展開。
    • 中文版:物件 > 展開
    • 英文版:Object > Expand
    • 快速鍵:無。
  3. 選擇要展開的項目。因為只要分開筆畫,所以選擇「筆畫 (Stroke)」即可。
  4. 筆畫和填色已分離。

Webdesigner Depot:100 個優異紙藝

Webdesigner Depot - 100 Extraordinary Examples of Paper Art

今天推薦的是 Webdesigner Depot 所介紹的紙藝作品。這邊只挑了幾個我自己比較欣賞的,有興趣請自己點連結看囉。

Peter Callesen 作品 (網站)

Jen Stark 作品 (網站)

Yulia Brodskaya 作品 (網站)

Bert Simons 作品 (網站)


2008年11月22日

WotLK 美版程式下載及更新

1. 下載更新程式:(僅有 torrent 檔下載,目前無 html 載點)

完整安裝版 (從無到有):http://www.mininova.org/tor/1997508
TBC 升級至 WotLK 安裝版:http://www.mininova.org/tor/2001744

2. 解壓縮後,執行 Installer.exe,開始安裝 WotLK。

3. Patch 會用到之前抓的 3.0.1 to 3.0.2 和 3.0.2 to 3.0.3 的部份,若已經刪除檔案就重抓吧。

2008年11月18日

在 Vista 上安裝舊版嘸蝦米

雖然行易發行了嘸蝦米 Vista 版本,但需另外購買,不然就只能使用試用版,以下方法讓舊版的嘸蝦米也能在 Vista 上使用。

Step 1 移除試用版 (若尚未安裝試用版請跳至下一步)

將所有應用程式都關閉後 (包括 MSN、Skype 等即時通訊軟體),將試用版移除。

Step 2 uniime.dll

下載 uniime.dll 這個檔案,放置於 X:\Windows\System32。(請自行掃毒,不保證無毒),若連結無效,請 Google 搜尋 Uniime.dll 即可。

Step 3 安裝舊版本

安裝 Windows 2000/XP 版本的嘸蝦米。

這樣就可以使用舊版的嘸蝦米了。

2008年9月3日

Google 瀏覽器 Chrome (beta) 釋出!

Google 瀏覽器終於釋出 beta 版!
下載位址:http://www.google.com/chrome/

試用的一些感想如下:

  • 可視畫面加大:工具列非常簡潔,該出現時才出現,也沒有很大的 Logo 標幟或其他廣告,保留了更多的瀏覽畫面。不過有些工具要稍微找一下,因為都藏起來了。
  • 開啟速度快:當然這只是感覺,畢竟不同瀏覽器開不同網頁速度不太一樣,像我家的 IE7 開無名小站就極慢。
  • Firefox 無痛轉移:慣用 Firefox 的人們轉用 Chrome 會覺得非常的順手,因為快速鍵、Bookmark 使用方式都滿一致的。不過既然跟 Firefox 很像,那為什麼要轉用 Chrome 呢?(笑) Chrome 請拿出牛肉來!
  • 設定簡明:設定視窗不同於 IE7 和 Firefox,只有簡單的三頁,可以設定的東西滿少的,Chrome 應該直接設定為符合大眾需求了。
  • CSS:某些網站 (如 MSN Space) 的畫面會有些排版上的問題,跟 IE 或 FF 看起來不太一樣,也許是 beta 版沒做好的部份,不然就是這些網站的 CSS 語法是 W3C 所規範的標準語法。總之,有些網站看起來怪怪就是。
  • RSS:沒有 RSS Reader,非常大的失敗,比 FF 的爛 RSS Reader 還糟糕啊!不過也許將來會跟 Google 會推出新的 RSS 服務,就再看看 Google 的造化了。
  • 開發者工具:可針對某個元件或元素 (Element) 做細節的觀看,偵錯或偷看別人網頁構成很方便,如下圖:(可點擊放大)
  • 線上交易:大部份銀行和網路商店瀏覽起來是正常的,不過實際使用的情況還不清楚,我目前沒有要轉帳或是買東西,改天有動作再報告囉!

這是試用幾個小時的心得報告,有其他發現再上來更新。謝謝收看。