Mr. NFrankenstein: CSS

2007年11月25日

Div字數太多，破壞原本版面設計 - overflow (Width = 100%) (IE : word-break firefox : overflow)

相信一定有很多人跟我一樣，對於這個問題感到很困擾。我們常常會用一個Table或是一個Div來排版，然而如果當內容太多時，或是使用者輸入了一長串沒有空格的英文字母時，就會造成版面被擠壓摟~~

這個問題往往大家都是用overflow的CSS屬性就可以解決了。
下面這裡有一些微軟官方資料可以參考看看：
http://msdn2.microsoft.com/en-us/library/ms534312.aspx
http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/overflow.htm

但是問題如果可以這麼簡單就解決的話，我就不用另外說明了。
當我們的div有設定一個寬度(width)的話，而且該寬度是一個固定的像素，例如500px等等的，
這樣就好辦，毫無問題。(不管是在firefox上或是在IE上面，都可以正常運作。)

但是問題來了，當我們設定它的Width為100%時，Firefox上~~OK，正常執行，但是IE呢？真的只能用OOXX來形容摟~~

為了這個問題我尋找了一天一夜，找到了一個替代方案，感覺還不錯！
我將DIV的Style設定為下面這一個：


style='word-break:break-all; overflow:auto;'

word-break是指能夠在IE上跑，而overflow當寬度設定為100%時，可以在firefox上跑！
如此這兩個屬性搭配，將可以讓我們的版面，可以當寬度超過時，自動換行，不會擠壓到版面。
不過在IE上面就不會長ScrollBar就是了！

Try it.

2007年11月9日

將CSS由VS 2003搬到2005上無法完全套用

.NET 2.0(Visual Studio 2005)已經發表了好一段時間了，
而最近剛好聽到一些朋友將過去在1.1上面的專案把它用2.0重新改寫，
而在般移CSS的這一部分，卻發生了很多的問題，因為他無法完全的在2.0上面呈現相同的效果。
例如"100%"這個數值，就有很大的變動，
很多人認為是.NET 2.0搞得鬼，或是IE7的問題，

其實並不是，我們仔細去看VS 2005為我們預設產生的html code，就可以略知一二了。
有一行宣告其結構定義的地方，

2003的版本：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2005的版本：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
有沒有發現，版本不一樣了！

那我們要怎麼讓過去的CSS可以完全的在新定義檔下呈現呢？
最簡單的解法就是將這一段替換回原本的2003版本，
但是這樣這做法我並不是很認同，因為這樣似乎有點在走回頭路的感覺，
因此我還是傾向於各個擊破，

body的高度只有內容物的高度，而不會是螢幕的高度，因為100%失效了，這會造成我們的畫面blocker失效。解法：將原本的body{...}給為html,body{...}就可以了！

類似的問題一定還很多，所以各位網友可以將你的問題提出來，大家可以在討論一下解法！