(IE6) white-space 在表格中怪問題

最近遇到一個怪問題 在 IE6 的表格中設定 white-space 屬性卻無效 只因為 IE6 怪異的 box 解析方式 對於用 px 設定的寬度有至高的優先權 完全忽略 white-space 的存在 解決的辦法就是用百分比(%)定寬

<table border="1"><tr>
  <td>彈性欄位</td>
  <td style="width: 1px; white-space: nowrap;">文字測試</td>
  <td style="width: 1%; white-space: nowrap;">文字測試</td>
</tr></table>

IE6 的呈現：

CSS fixed 定位( FF / IE6 )

fixed 定位主要是以 window 物件區塊做定位依據，所以不會隨頁面捲動而變動定位。

以往要達成這種模式的定位都要利用 JavaScript 的 onscroll 事件去達成，是蠻吃重的一種方法，而且流暢度也不好，會有閃爍的現象。

利用 fixed 定位可以簡化 JavaScript 的開發和負擔，而且又穩定且簡單設定。

body{
    height:1200px;

    /* prevent screen flash in IE6(解決 IE6 不正常閃爍) */
    background:url(nothing.txt) white fixed;
}

div{
    background:#FF0066;
    border:4px solid #FF9999;
}

/* 水平置中 */
.fixed-center{
    width:100px;
    height:100px;
    position:fixed;
    top:50%;
    left:50%;

    /* 上邊界計算 */
    /* -(border-top-width + padding-top + (height/2) ) */
    /* 或者是整體高除以二(offsetHeight/2) */
    margin-top:-52px;

    /* 左邊界計算 */
    /* -(border-left-width + padding-left + (width/2) ) */
    /* 或者是整體寬除以二(offsetWidth/2) */
    margin-left:-52px;

    /* position fixed for IE6 */
    _position: absolute;
    _margin-top:0;

    /* clientHeight:不包含邊匡的區塊高度( padding + height ) */
    /* offsetHeight:包含邊匡的區塊高度( border + padding + height ) */
    _top:expression(documentElement.scrollTop + ( documentElement.clientHeight-this.offsetHeight )/2
    );
}

.fixed-top-center{
    width:100px;
    height:100px;
    position:fixed;
    top:0;
    left:50%;
    margin-left:-52px;

    /* position fixed for IE6 */
    _position: absolute;
    _top:expression(documentElement.scrollTop);
}

.fixed-bottom-center{
    width:100px;
    height:100px;
    position:fixed;

    bottom:0;
    left:50%;
    margin-left:-52px;

    /* position fixed for IE6 */
    _position: absolute;
    _top:expression( documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight );
}

展示頁面(Demo Page)

參考來源：上下左右置中、不隨頁面捲動的內容-小正正教室

create_function 匿名函數

在 PHP 中的函數只要宣告後就是全域的，而且還不能修改，不小心就會撞名，真是麻煩的事，而且實體宣告在當做變數傳遞時非常麻煩，最近習慣 JavaScript 的函數傳遞方法，為了達到這個作法，PHP 中有一個匿名函數的宣告方法，會直接已變數的形式呈現，可惜的事在宣告上必須用字串編寫，也是很麻煩，但總比沒有好。

<?php
    $newfunc = create_function('$a,$b', 'return $a + $b');
    echo $newfunc(2,5);

參考來源：PHP Manual

利用 JavaScript 讓 IE6 支援 CSS 2.0 hover 的方法

利用 IE6 特有的 expression 屬性質，去執行 JavaScript 程式。
好處是可以簡化開發，讓設計師可以自己去控制想要的樣式。
壞處是執行大量的 expression 會讓 IE6 很吃重。


ie_hover.htc 中的程式碼：

this.onmouseover=function(){
    if(!this.className.match(/(^|\s)hover(\s|$)/)){
        this.className=(this.className+' hover')
            .replace(/\s{2,}/g,' ')
            .replace(/^\s+|\s+$/g, '');
    }
}
this.onmouseout=function(){
    this.className=this.className
        .replace(/(^|\s)hover(\s|$)/,' ')
        .replace(/\s{2,}/g,' ')
        .replace(/^\s+|\s+$/g, '');
}
this.style.behavior=null;

ie_hover.html 中的 CSS：

p{
    padding-left:30px;
    behavior: url(ie_hover.htc);
}
p:hover,
p.hover{
    padding-left:0;
}

展示頁面(Demo Page)

CSS 三欄排版

1. float 排版
   
   這是在 Table 排版之後最常見的排版方式，利用 float 與 clear 的屬性設定去達成的分欄排版。
   
   最近發現除了利用 clear 屬性的空 Tag 以外還有其他的方式可以達到這個效果，在最外層的 div 上加入以下屬性也可以達到相同的效果：
   

   * html #demo_1{
       height: 1%;
   }
   #demo_1:after {
       content: ".";
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;
   }
   #demo_1 {
       zoom: 1;
   }
   

   
   
   
2. table 排版
   
   這是最早期排版方式，雖然有種種的缺點，但還是有很多網站使用，除了利用原有的 Table Tag，也可以使用其他 Tag 設定 display 屬性去達到 Table 排版的效果，雖然在寬度的定義上的彈性，但還是建議保持只有一個欄位的彈性寬度，過多的彈性寬度只會造成意想不到的後果。
   
   
   
3. margin and float 排版
   
   這是利用中欄的 margin 屬性空出側欄位空間，再利用 float 及負邊界方式去達成的三欄排版，因為 float 屬性不會對整體高度做出貢獻，如果需要側欄的高度影響，必須上擁有 clear 屬性的 Tag 或利用第一個範例的方法，由於中欄沒有 float 屬性所以不能在內容使用 clear 屬性。
   
   
   
4. margin and position排版
   
   這是利用中欄的 margin 屬性空出側欄位空間，再利用 position 的定位方式去達成的三欄排版，因為 position 屬性不像 float 屬性，可以利用 clear 屬性做出高度的貢獻，所以側欄的高度不可以大於主欄，要不然會造成顯示重疊。
   
   
   
5. padding and float排版
   
   這是結合 (float 排版) 及 (margin and float 排版) 的排版方式，主要是解決 (margin and float 排版) 的主欄中不可以使用 clear 屬性的問題，CSS 的差別只在於利用外匡的 padding 屬性去做預留空間的設定。

優劣差異：

	float	table	margin float	margin position	padding float
靈活性	高	低	高	高	高
親和力	高	低	高	高	高
HTML 結構	簡單	複雜	簡單	簡單	簡單
寬度彈性	no	yes	yes	yes	yes
允許彈性的欄位數	0	all	1	1	1
overflow 容錯	低	高	低	高	低
瀏覽器的解析差異	小		小	小	小
欄位的高度影響	all	all	all	1	all

展示頁面(Demo Page)

Ajax 模組架構的應用

一樣的就之前所提到的問題(Ajax 開發所產生的問題)，這是另一種以模組架構為基礎的方法，模組開發的好處我就不多作說明了，主要的行為模式是：

1. 在請求 Page 時就先將 Module Include，讓頁面再第一次讀取時就可以完整呈現。
2. 在頁面需要執行局部置換時，再利用 Ajax 向 Module 請求局部內容。
   

這樣做既不會失去模組開發的優點，也不會有 Ajax 造成的過長等待，讓 Ajax 主要應用在局部置換及 UI 處理。

利用屏壁來延長頁面的呈現時間

就之前提到的問題(Ajax 開發所產生的問題)，這很可能連帶出現以下問題：

1. 瀏覽者再頁面尚未完整呈現時誤觸連結，造成錯誤操作。
2. 功能的初始未完成，瀏覽者再使用上出現無法動作的錯愕情形。

這些問題可以用一個有效的方法去延長瀏覽者的等待時間，在一開始的頁面裡預設疊上一個遮蓋整個頁面的等待圖示，在 JavaScript 處理完後再移出屏壁，一個很好的範例就是 Gmail，再一個主要的頁面呈現前，置入一個等待圖示去避免一些可能的不當操作。

順帶一提，Gmail 利用 ifreme 去做出局部置換的效果，這樣做的好處是，瀏覽器會自動去紀錄上下頁，在 Ajax 的應用上瀏覽紀錄這件事是必須額外處理的。

利用 Ajax 減少 Server 運算量

在 Ajax 還沒有出現時 JavaScript 本身就可以執行許多計算方面的程式了，像之前的文章『HTML 比較(diff)』、『數獨（sudoku）解題』、『線性代數-計算機』等都是利用 JavaScript 去達成的計算程式，象 Yahoo 也有在 Login 時利用 JavaScript 做 md5 的計算，其實瀏覽器還是可以做一些有規模的運算。



主要是將運算資料取回，計算結果明細後，再跟 Server 取得剩餘的詳細資料，這個架構可以讓 Server 原本的運算量轉由瀏覽器執行，是一個以空間換時間的作法，當然有一好沒兩好，沒錯這樣的方法明顯會發生之前所說的問題(Ajax 開發所產生的問題)，是否要用這個方法就看各位的考量了。

其中特別要注意的一些事項：

1. 再資訊必須是即時性，且運算量大於一定時間以上時，考慮這種架構才會有意義，要不然只會浪費頻寬。
2. 資料安全性問題，必須定義哪些瀏覽者可以取得計算資料，要不然會造成嚴重的漏洞。
3. 資料量的大小，太大的資料可能會造成瀏覽器整個當掉，再規劃時要特別注意最大上限，至於詳細的範圍要依瀏覽者的設備而定。