[claire-css]ie7背景圖片重複(破圖)問題解決方式(zoom應用)

今早來，同事跟我回報系統有ie7的錯誤，
正常的狀態下，畫面是長這個樣子。

結果到ie7版本變成右邊有一個鼻屎區域=口=a(下圖黃色區塊)

ie瀏覽器真的很令人崩潰阿!!每次都在處理不同ie的問題Orz

本來以為是icon的寬度設定，但我寫了寬度也沒用。

所以就開始試誤啦...

因為這個區域有使用TK元件，我就去測測看外國朋友寫的css啦~突然，有個屬性當我關閉的時候，鼻屎就不會出現了= =+。這個屬性是zoom:normal。

查詢了 css zoom屬性，國外的css-trick回應如下：

The zoom property in CSS allows you to scale your content. It is non-standard, and was originally implemented only in Internet Explorer. Although several other browsers now support zoom, it isn't recommended for production sites.

翻譯蒟蒻如下：

CSS中的zoom屬性可以讓​​你擴展你的內容。這是非標準的，最初只實施在Internet Explorer中。雖然其他幾個瀏覽器現在支援zoom，但這對網站不是一個建議的做法。

所以很明顯，這屬性就是給ie的呀!再google一下 幾篇中文文章，

Zoom應用 - 解決IE排版問題

CSS中不为人知Zoom属性的使用介绍(IE私有属性)

其中有一段寫到：

如果你用的是Fire Fox / Chrome，這兩款出現的畫面都是一樣的，可是在IE的環境下，沒有附加ZOOM:1的卻會出現崩壞的畫面。這是所謂「hasLayout」的屬性，如果一個物件有設置長闊的時候，那件物件就會擁有「hasLayout」的屬性。

然而我們偶爾會開一個div只是為了裝拑background，同時為了遷就內容的伸延性，該div也不會有長闊的設定。最為方便的解決方法就是在該div上增加zoom:1。

所以我使用

zoom:1的屬性給ie7使用，在ie7瀏覽就發現鼻屎不見了^0^~耶~~~~