利用 AlphaImageLoader 解決 IE6 對 png 圖檔的透明問題

之前都利用 JavaScript 的 htc 去解決 png 的透明問題
但是在 JavaScript 作動前 png 是不會正常顯示的
在學會 AlphaImageLoader 的使用後發現效果還蠻好的

但是會有一些奇怪後遺症
就是區域內的連接都失效了
解決的方式就是在利用一個元素放在區域內
然後設有 position:relative; 的屬性
連結修正無法生效在設有 position:absolute; 的區域內

CSS :

#ContainerWrapper{
    background: transparent url(/images/border_bg.png) repeat-y;
    width:982px;
    margin:0 auto;

    /*IE6 PNG 檔透明修正設定*/
    _background: transparent;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/border_bg.png', sizingMethod='scale');
}

#ContainerWrapper #Container{
    /*修正 AlphaImageLoader 造成的連結失效問題*/
    _position:relative;
}

HTML:

<div id="ContainerWrapper">
    <div id="Container">
    </div>
</div>

AlphaImageLoader 的參數值

1. enabled:布林值(Boolean)。是否開啟濾鏡(基本上可以忽略這個設定)
   
   • true:開啟濾鏡(預設值)
   • false:關閉濾鏡
     
     
2. sizingMethod:字串(String)。設定圖片在元素容器裡的顯示方式
   
   • crop:剪切圖片以符合應元素尺寸
   • image:使元素尺寸符合圖片尺寸(預設值)
   • scale:縮放圖片以符合元素尺寸
     
     
3. src :字串(String)。指定圖片的路徑，注意這個路徑是指加載濾鏡的頁面相對於圖片的路徑而不是css文件相對於圖片的路徑。
   建議統一使用以 DocumentRoot 為準的絕對路徑
   

參考來源：
Microsoft.AlphaImageLoader滤镜讲解

IE6 對 visibility 負荷過大的問題[CSS]

IE6 在對大量元件做 visibility 顯示及隱藏時
會有負荷量過大的問題出現讓整個瀏覽器變慢
解決的辦法就是用 filter 去代替相同的效果
就會得到很明顯的改善

.Action{
    visibility:hidden;
    _visibility:visible;/* for IE6 */
    _filter:alpha(opacity=0);/* for IE6 */
}

.Action:hover{
    visibility:visible;
    _filter:alpha(opacity=100);/* for IE6 */
}

IE6 在負邊界( margin )上的異常問題[CSS]

當負邊界( margin )加上 float 屬性時 在 IE6 上會出現詭異的邏輯問題 設定的數值會乘於二 也就是 margin:-100px; 會變成 margin:-200px; 解決這個問題只好做特別做修正設定 HTML 與 CSS 設定：

   .widget{
       padding-left:35px;
   }
   .widget .image{
       width:30px;
       float:left;
       margin-left:-30px;
       _margin-left:-15px;/*for IE6*/
   }

<div class="widget">
   <div class="image"><img /></div>
   <div>text text</div>
</div>

IE6 中的最大最小寬度和高度

/* 最小寬度 */
.min_width {
    min-width: 300px;
    /* sets max-width for IE */
    _width: expression(
        document.body.clientWidth < 300 ? "300px" : "auto"
    );
}

/* 最大寬度 */
.max_width{
    max-width:600px;
    /* sets max-width for IE */
    _width:expression(
        document.body.clientWidth > 600 ? "600px" : "auto"
    );
}

/* 最小高度 */
.min_height{
    min-height:200px;
    /* sets min-height for IE */
    _height:expression(
        this.scrollHeight < 200 ? "200px" : "auto"
    );
}

/* 最大高度 */
.max_height{
    max-height:400px;
    /* sets max-height for IE */
    _height:expression(
        this.scrollHeight > 400 ? "400px" : "auto"
    );
}

/* 最大最小寬度 */
.min_and_max_width{
    min-width:300px;
    max-width:600px;
    /* sets min-width & max-width for IE */
    _width: expression(
        document.body.clientWidth < 300 ? "300px" :
            ( document.body.clientWidth > 600 ? "600px" : "auto")
    );
}

/* 最大最小高度 */
.min_and_max_height{
    min-height:200px;
    max-height:400px;
    /* sets min-height & max-height for IE */
    _height: expression(
        this.scrollHeight < 200 ? "200px" :
            ( this.scrollHeight > 400 ? "400px" : "auto")
    );
}

參考來源：
IE中的最大最小宽度和高度 - barrydiu的专栏
DIV CSS网页布局：最小高度（min-height）的妙用

(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 的呈現：

利用 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)

在 IE 中對表格的操作問題(innerHTML,style)

問題1：在對以存在的表格用 innerHTML 新增列或其他 DOM 子節點時，會發生錯誤或警告，或者是完全沒反應。

table.innerHTML+="<tr><td>test</td></tr>";

解決方法：採用 createElement 去建立 DOM 物件，再用 insertBefore 插入新的子節點。

var tdObj=document.createElement('td');
trObj.appendChild(document.createTextNode("test"));

var trObj=document.createElement('tr');
trObj.insertBefore(tdObj);

table.insertBefore(trObj);

問題2：在現存表格中的子節點(tr,td)作 style 操作時，完全沒反應的現象。

tr.style.display="none";
td.style.display="none";

解決方法：利用 className 去套用以設定好的樣式。

table .hide{ display : none; }

tr.className="hide";
td.className="hide";

目前我只在 IE 上遇到這些問題，Firefox 則不會有這樣的問題，可能是 IE 對 table 的 DOM 解析比較特別，其他的 DOM 物件都不會有類似的狀況。

在 IE 中對 window.open (子視窗)的參數傳遞

由於子視窗和母視窗是使用不同的 document，在 IE 的架構上不可以對母視窗作 call by reference，要先將要用的值設定給母視窗的變數，再作函數呼叫，在 JavaScript 中字串的屬性是一般變數值，不會有 reference 的現象。

//要回傳的陣列
var selData=["A","B","C","D"];

//清空母視窗的陣列，將陣列長度設為零
window.opener.resultArray.length = 0;

//將參數值填入母視窗的陣列中
for(i=0,l=selData.length; i<l; i++){
    window.opener.resultArray.push(selData[i]);
}

參考來源：請問子母視窗如何傳遞變數


結論：IE 真的很麻煩！難道不可以允許符合邏輯的語法嗎？

Form 標籤在 IE6 中會有奇怪的段落現象

最近在練習使用 Div 標籤排版，也順便修改自己常用的網頁，那個頁面是以前用表格排版的，隔了很久的時間我已經快看不懂裡面寫什麼了！果然用表格排版是個錯誤，在練習的過程中真的省去許多不必要的大小和標籤，原始碼的可閱讀性也增加了，我也在裡面加上了一些註解，要養成寫註解的良好習慣。

正題：Form 中如果有隱藏欄位時，在 IE6 中總會多出空的一行，使的 Div 超出預設的大小，嘗試了很多方法之後，終於找到一個有效的辦法，就是在 Div 中設定 overflow:hidden; 這個樣式，可能是我對 CSS 還不是很瞭解才會花那麼多時間，但原先的排版在 Firefox 裡卻是和我想像中的設定一樣，不知道是不是 IE6 本身的問題。

可惡的 Microsoft IE

這是之前 Blog 在 IE6 中顯示的樣式狀況，很奇怪的多了一條線，在 HTML 中明明就沒有套用樣式，可是那個 div 卻自己套用了上一個父標籤的樣式。


在 Firefox 中沒有這個問題，能夠正常顯示我所設定的樣式。


為了能讓更多的瀏覽者能夠正確的顯示我的網頁，於是我只好另外設計對應 IE6 的樣式，選擇了替代方案。


可是呢？我找別人幫我測試我的網頁，在 IE7 中一樣出現了之前的問題，為了解決這個問題，在網路上找尋相對應的方法，但在胡思乱想的 Blog 中看到了這段話：

『話說回來，IE7 的出現，又給網頁設計師們出了個難題，拋開 IE345，以往僅僅要顧及 IE6 和 Firefox 的差異就夠令人鬱悶的了，這又出現了 IE7。一直呼喊著標準啊標準啊，強悍的微軟告訴我們，他們家的 IE 就是標準，什麼 W3C，滾一邊去。』

這讓我失去了為 IE7 修改錯誤的動力，就暫時先考量 IE6 和 Firefox 這兩大族群，對於其他不遵守標準的 IE 就暫時不理他吧！

設定 Blogger 在 IE 的 CSS

由於我另一個 Blog 在 IE 中有了奇怪顯示錯誤，為了達到親和力信念，我無法忽視這討厭的錯誤。

原本是用 !important 的方法去做，但發現完全沒有用，真奇怪到底是那裡不行，原來 blogger 有自己的設定方式。

只要在給 IE 樣式名稱前加上 _ 就可以了，但如果也有給 Firefox 系列用的樣式，必須將Firefox 的樣式放在 IE 樣式的前面。

.sidebar .widget {
  border : 1px dotted #FFFFFF ; /*這是給 Firefox 的樣式*/
  _border : 2px dotted #999999 ; /*這是給 IE 的樣式*/
}

利用 !important 修正 IE 與 Firefox 的差異

有次在無意間瀏覽他人的CSS檔案時發現沒見過的指令，上網查詢了一些相關資料，發現這令我驚訝的語法。

#pmenu{
    color : red !important; /* Firefox 會採用這一行的樣式 */
    color : blue ;
    /* 由於 IE 看不懂上一行的 !important 指令 */
    /* 所以會採用這一行的樣式 */
}

相關網頁：important终级讲解