HTML CSS center a auto width DIV

test test test

各種版本IE的網頁測試

請出IETester，建立出一個多版本的IE測試環境。
可安裝在Windows 7, Vista and XP，可測試IE8, IE7 IE 6 and IE5.5。
這可比弄好幾套OS簡單的多了。

IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.

HTML原始檔中js及css後面加了＂?數字＂是什麼用途？

在Ruby on Rails產生的網頁原始碼中總看到assets的後面會多一段數字，像是：
<script src="/javascripts/cache/bundle.js?1236331223" type="text/javascript"></script>
現在才知道這是為了讓確保使用者能夠拿到最新的javascript或css檔案。

看到一個Plugins - Asset timestamping，會把最後修改的timestamp加到URL中，但是plugin的comment中就有人回應「Looks like assets are timestamped in Rails automatically now (v 1.1+)」，可能這是很舊的plugin了吧!

做了測試用Live HTTP Headers去看:
1.先隨便試一個js檔，如：http://wadevelop.blogspot.com/xxx.js?12345
Cotent-Length:9999
2.再開新的tab，一樣連到http://wadevelop.blogspot.com/xxx.js?12345
Cotent-Length:0
3.然後換連到http://wadevelop.blogspot.com/xxx.js?abcde
Cotent-Length:9999
證明了?後面更新timestamp，使用者就不會使用cache，而會重新載入js或css檔案。

處理iframe auto height(Iframe自適應高度)

全部參考：
1.Iframe自動調整高度, 在子網域SubDomain的情形
2.處理iframe auto height(Iframe自適應高度)
3.處理iframe auto height(Iframe自適應高度) - 相關問題紀錄
4.完整的iframe auto height程式(在iframe內容頁中處理)
5.或許你想要 "html include html，兩種工具介紹。"

注意

1.現在會寫下這篇的主要原因在於google chrome中，iframe的高度，會不斷的增高，當不斷按下iframe.content中的連接時，會不斷的reload。
2.這篇無法處理cross site的問題，先前有一篇「Iframe自動調整高度, 在子網域SubDomain的情形」
3.請參考處理iframe auto height(Iframe自適應高度) - 相關問題紀錄

處理的過程是

1.是從iframe的onload事件處理
2.或是從iframe content的onload事件處理
3.將iframe.height設成iframe.content.height。

但過程中就會遇到很多問題

Iframe 的onload事件

1.在Linux的Konqueror中似乎只有第一次, 之後內容的改變都不會再onload.
2.Mac的Safari似乎沒有這個onload事件, 因此Iframe先預設高度為2000px.
3.而IE 6; Firefox 2; Opera 9都沒有問題.

這個onload問題決定的是，要在iframe或iframe.content的onload事件來處理

iframe.content.height的取得問題

和height有關的屬性有clientHeight、offsetHeight和scrollHeight，參考 http://www.tsolong.com/post/355.html
1.每個Browser的定義不相同
* 參考同上。

2.當設DOCTYPE後還會產生變化
* 目前的測試是，沒加的話，３種高度Height會依Browser的設定
* 有加的話，不論那一種，３種高度Height都同樣拿到scrollHeight的值。

3.想說用jquery來取得height，也會受DOCTYPE設定的影响
用alert($("body").height()+" "+$("body").outerHeight()+" "+$("body").innerHeight());來測
* 在chrome和firefox中，不論DOCTYPE設什麼，或沒有設，３種高度都同樣拿到scrollHeight的值。
* 在IE7中，DOCTYPE有設，３種高度都同樣拿到scrollHeight的值。
* DOCTYPE沒設，３種高度都同樣拿到像是clientHeight的值。
* 需在每個頁面加入jquery.js

4.chrome中的iframe.document.body.scrollHeight會受iframe.height影响,
5.本文後面還遇到css設定position:absolute影响高度的問題

以上問題試了好幾個小時，覺得這真是個有點難解。

目前的解法

1.在iframe的onload中處理
2.每個iframe content一定要有DOCTYPE(解決chrome的問題，才能用offsetHeight)
3.用offsetHeight的值(解決chrome的問題)



這段code已測試的，Firefox3、IE7、Chrome。
還想在Konqueror、Safari、Opera、IE6中做測試。
不敢保證用offsetHeight在未測試的Browser或舊版本中不會遇到問題。
在iframe.onload中處理，也可能有瀏覽器會遇到問題。

實際運用後又遇到問題

http://of.openfoundry.org/projects/1/sympa
在網站連接sympa(mailing list system)的時候，設高度的功能硬是失效，原來拿到的content.height是０，為什麼是０呢？
經檢查發現以下片段



名為Canvas的div將整個網頁包住了，並且設為position: absolute;，造成Canvas像是定在那裏，而整個網頁並沒有高度。(目前只確定Firefox3有這問題，其它Browser沒有測試)

在IE的table->td中若沒有值

在IE的table->td中若沒有值, 會連border都不見了.
解決的方法是
1.加入「空白」或「&nbsp;」, 可以用jquery替空白的td加入, $("td:empty").html('&nbsp;');
2.本來希望CSS可以解決但是empty-cells:show卻不被IE支援...

這篇Fun with tables, 講了不少Table的問題.

連續英數字無法換行的問題

連續英數字無法換行且會把表格撐大，使得表格很看。
以下列出四個狀況，請在IE及Firefox中比較‧

寬度參考400px

1	2	3	4
aaaaabbbbbcccccdddddeeeeefffffggggg	aaaaabbbbbcccccdddddeeeeefffffggggg	aaaaabbbbbcccccdddddeeeeefffffggggg	aaaaabbbbbcccccdddddeeeeefffffggggg

1.將超出的部份隱藏，IE及Firefox適用。
2.Firefox將超出的部份隱藏，但IE7會換行。
3.超出的部份使用捲軸，但IE7高度有問題。
4.Firefox超出的部份使用捲軸，IE7會換行。

使用word-break:break-all;及word-wrap:break-word;都可將過長的英文斷行，但是遇到一般單字時，word-break:break-all;是依照畫面直接截斷，而word-wrap:break-word;則會依照空格來截斷，較能保持可讀性。
在表格的運用時，Table需設定成table-layout:fixed。

程式碼如下：




網頁設計必看網站

Smashing Magazine有很多的好文章

CSS 好東西

53個你不能錯過的CSS技巧

12個基本CSS樣版下載

2006年50個基於CSS的最佳網頁設計

為何使用表格排版是不明智的

說明應讓用div加CSS的排版方式，而非用表格。

CSS Browser Selector

可以針對不同的Browser來設定CSS的CSS Browser Selector。

w3schools css 參考

maxdesign css教學

Sample CSS Page Layouts

IE7

IE7 is a JavaScript library to make IE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6