我現在把改這個版遇到的問題寫在這一下,如果你有在改版也許會碰到這些問題。
這篇文章裡的CSS解釋網路上學來的,附有各網址在底下。(紅框部分為引用文章)
我用比較簡單的方釋自己來解釋一下,有錯誤請指教。

首先先來講min-height (min-width、max-height、max-width) & height (width),
IE6.0看不懂min-height (max-height) 和min-width (max-width) 這些語法,
(*以下以min-height為例子作解釋)
IE6.0只認得height,所以它實際上是把height的設定就當做min-height以及min-width來處理
在我現在這個樣式的例子中,網友迴響部分的背景圖是被切割放在不同的標籤裏,
而回應的照片是直接用定位放在右邊的,也就是說有些時候當你回應只有一行,
造成它回應區塊高度沒有超過照片的高度時,照片就會被切割無法正常顯示。
像是這樣 ↓ :

經過設定後應該要顯示成這樣 ↓ :

應該看的出來差別吧,但是要如何設定呢?
這時候就要靠CSS Hack出場了,又什麼東西是CSS Hack呢?

CSS Hack是在標準CSS沒辦法兼容各瀏覽器顯示效果時才會用上的補救方法,
在各瀏覽器廠商解析CSS沒有達成一致前,我們只能用這樣的方法來完成這樣的任務。

有些特殊寫法是FireFox看的懂但IE6.0看不懂的,於是IE6.0會跳過這些執行他看的懂的語法
(相對的也會有IE6.0看的懂但FireFox卻看不懂的窘境,只能期待微軟大神快統一了…)
更慘的是瀏覽器也不是只有這兩家,也就是說,要讓網頁在不同瀏覽器下,
皆能顯示出你想要的樣子的話,就會用Hack來設定。

在我這個例子中,先加上min-height:50px;,讓FireFox、IE7.0以及Opera等瀏覽器能看懂
做到這一部大部分瀏覽器都會知道這個區塊的最小高度是50px,
也就是說這個區塊能無限加大,但它高度最小值再小也必須要有50px的意思。
然後再加上_height:50px;以後,IE6.0也會把最小高度定成50px了。

為什麼前面會有一個”_”呢? 這就是hack的方法

在屬性名前加上加號” + “,這個Hack只有IE系列可以識別.
在屬性名前加上星號” * “,這個Hack只有IE系列可以識別.
在屬性名前加上下劃線” _ “,這個Hack只有IE系列 (除IE7外) 識別.

這三條只是IE系列的部分,還有其他瀏覽器的特殊寫法可以參考這裡

圖被壓的問題解決之後還有悄悄話的部分要解決 (感謝李亞大哥相救哈哈)
用.secret去設定就可以了。

其他一些小部分像搜尋,只是把它原本按鈕的字縮小藏起來,然後在放底圖而已
很常見的圖片連結做法。

然後內文區的links沒有被隱藏起來(不然上面文章連結和搜尋也會一起消失),
祇是把內文區的新迴響那些區塊隱藏掉而已。

阿… 不知不覺打好多,反正就是這樣拉。
繼續閱讀後有參考資料&延伸閱讀

✱ Facebook 留言 ✱
  • CSS∥IE6中支援PNG透明度 CSS作法

    在IE7之前都尚未支援PNG的透明度,目前IE6市佔率還高的很,所以就苦了我們這些網頁設計師,今天終於搜尋到好 … …
Load More Related Articles
Load More In ▌Design╠ CSS‧語法 ╣

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

Check Also

如何取得個人Facebook臉書的連結網址

如果想要分享自己的Facebook帳號給朋友,找了半天不是很好找,到底在哪裡呢? 安卓和蘋果的方式不太一樣~讓 … …