Safari 的 display: table-cell

找到的 bug 似乎是講用 Javascript 動態改變 display 時的 bug,不過我遇到的是純 CSS 的 layout 問題...

丟到 IE6/Firefox2/Opera9/Safari2/Safari3 測試,發現在 2.0.4 (Mac) 及 3.0.1 (Win) 上都會先出現 #id2 再出現 #id1,但是其他的瀏覽器都是先顯示 #id1 再顯示 #id2。

這是在我的 Windows 上顯示出來的結果,Safari 2.0.4 (Mac) 的結果跟 Safari 3.0.1 (Win) 的結果一樣,再加上我手邊沒有 Mac,就不貼了:

我的問題是, 這兩個都通過 的 Browser 到底哪個才是正確的?

UpdateThe display declaration 上早就提過這個問題了。

各瀏覽器的速度

Note:這只是在 Javascript 裡跑 CSS Selector 的速度。

剛好看到 SlickSpeed CSS Selector TestSuite 這篇文章,在 Windows 上測了幾個瀏覽器,單位都是 ms (所以數字愈小愈好),測試的時候都儘量保持不動電腦的情況下跑完:

1.5.1 1.1.2dev 1.2dev 1.1b1 2.02
6 1600 3238 1302 839 6511
2.0.0.5 pre 176 4289 144 965 5411
9.20 68 1445 112 198 1122
3 beta 120 733 140 152 931

呃, 2 的速度... (想裝地雷看看有沒有進步,結果想到早上才失敗過,沒辦法測 XD)

Update:網頁上多了 的測試項目,速度也還不錯。

Clearing floats

這篇是在講 。情況是有有個 #container1,包了 #block1 與 #block2:

<div id="container1">
    <div id="block1">content</div>
    <div id="block2">content</div>
</div>
<div id="container2"></div>

其中 #block1 與 #block2 都設有浮動 (float) 屬性:

#block1 { float: left; width: 50%; }
#block2 { float: left; width: 45%; }

另外 #container2 裡面也許會有其他的浮動屬性,但是你不想將 #container2 裡面的東西跑到 #container1 的右邊,所以對兩個 container 用 clear: both 處理:

#container1, #container2 { clear: both; }

現在想要對 #container1 設定 margin-bottom,使之與 #container2 有邊距:

#container1 { clear: both;
              margin-bottom: 1em; }

但這樣是不會動的,#container1 要加上 overflow 屬性 (參考原文內容):

#container1 { clear: both;
              margin-bottom: 1em;
              overflow: hidden; }

不過這樣的話 IE6 還是不會動,所以要再加上:

#container1 { clear: both;
              margin-bottom: 1em;
              overflow: hidden;
              width: 100%; }

理論上這樣就可以解決這些問題了... (真是麻煩 :/)

YUI Grids CSS 的問題...

問個 的問題... 在 IRC 上跟 都沒有找到答案,所以還是開一篇問一下...

如果我想要用 做到 1/8 - 1/8 - 1/8 - 1/8 - 1/6 - 1/6 - 1/6 的切割,要怎麼做?(平常應該是用不到這種 case,所以只是問問而已,想知道 YUI CSS Grids 的極限在哪裡)

順便給個失敗的例子:,這裡面 1-3-1 與 1-3-2 換行了...

Firefox (trunk)

裝了 trunk 版本的 ,有些東西不相容 (其實也只有 Google Web Accelerator 不相容),有些地方怪怪的 (像是在編輯的時候游標位置稍微偏掉),不過大致上還好 :p

當然,既然裝了 trunk 版的,一定要來抓一張 跑出來的結果啦:

Update:最直接的感覺是記憶體的量減少超多,我開了快三十個 tab (都是一堆文字一堆圖的 RSS 新聞站台,從 Bloglines 點出來的),結果還吃不到 100MB。

pre 裡的換行

用 <pre></pre> 如果遇到文字過長的時候就會炸掉,所以我 Blog 上偶爾會因為我貼 code 發生慘劇 (因為也不知道怎麼解),結果剛剛在 Wrapping the pre tag 這篇看到解法:

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

有 CSS3 的就以第一條支援 (在 CSS 2.1 裡也有), 系列以第二條, 以第三與第四條,最後則是處理 IE。