使用 CSS Sprites 設計網頁但不用 background-image 的技巧

參考文章:使用 CSS Sprites 設計網頁但不用 background-image 的技巧

CSS Sprites主要是使用在流量大的網站的一種技巧,因為太多圖片會造成太多的 HTTP Request,因此會使用一張大圖、然後使用background-image加上background-position的方式,來減少 HTTP Request ,一般小型網站其實用不太到。

但設定背景圖其實有一個比較明顯的問題是,列印的時候印不出來。如果背景圖只是用在純裝飾、文字都還有顯示那還好。但如果該背景圖很重要也希望被列印出來,那列印的人得去改印表機的預設設定、而一般人當然不可能會知道這個設定。

因此如果希望圖片是能夠被印的,就要改使用把大張圖片直接置入到html,然後 clip 的方式來設定。我舊的作品集網站上方主要連結有使用這樣的技巧。所以如果預覽列印時,上面煮選單的圖片是可以被印出來的。

但是,這個方法使用在主選單上也許還可以,但如果以中文字來說,要使用再圖片文字上的時候,個人是覺得就不太適用。另外思考一下「為甚麼要列印網頁」?列印網頁的重點應該還是在於要把內容印出來。因此只要對應的文字有被印出來,即使印出來不像螢幕上顯示的那麼漂亮,實際上也是無妨的,因為重要的是資訊。

而且個人是比較偏好純文字的結構,除非這張圖屬於內容的一部分,不然我不太喜歡用置入的方式放到html裡,因為這樣你還得再加上alt去標注,那好像不會比用background的設定好到哪裡去。

因此我自己認為比較好的解法應該是直接設定一組print的css,然後把印不出來圖片的部份的文字都讓他顯示出來,只要可以達到列印的可用性即可。

解決IE6~IE8的css相容性問題

參考文章:解決IE6、IE7、IE8、Firefox的瀏覽器相容性問題!

其實就是ie hack,這裡只註記最簡單的方法,簡單來說:

.aaa{屬性:屬性內容 \9;}—->所有IE懂
.aaa{*屬性:屬性內容;}—->IE7、IE6懂
.aaa{_屬性:屬性內容;}—->IE6懂
.aaa{屬性:屬性內容 !important;}—->Firefox、IE7懂
.aaa{*屬性:屬性內容 !important;}—->IE7懂、其他都不懂

消除IE7以下版本在float時,margin變雙倍的問題

參考文章:display:inline可以消除IE6和IE7下的浮动BUG

bug 描述:在 IE7 以下版本,假設使用 float:left;,那如果再設定 margin-left:5px; 時,實際上顯示的 margin-left 會變成兩倍,也就是10px。只有設定跟float同一邊的margin才會有變兩倍的問題。

解法:在設定float元素上加上 display:inline; 即可。

css垂直多欄版面延伸

參考文章:重直多欄式版面自動延伸高度使多欄式版面高度等高

第一篇講的是子元素浮動時,父元素高度無法撐高的問題。這個用overflow:hidden;來解。

第二篇講的則是父元素撐高後,子元素要如何讓他的高度自動隨內容比較多者一起延伸。解法是設定padding-bottom:5000px;撐高,然後設定margin-bottom:-5000px;把邊界拉回。那因為搭配父元素overflow:hidden;的情況下,超過的會被隱藏,看起來就好像延伸了。所以這個必須搭配第一項的設定才能有效果。不然會看到設定padding-bottom:5000px;的區塊會一直往下延伸很長很長。

關於ie 的 haslayout

這幾篇都是跟haslayout有關的

斯芬克斯之迷——ie私有属性haslayout的困扰

如何避开麻烦的margin叠加(margin collapsing)
這兩篇主要是在講

  1. firefox底下float元素不會佔用到高度,以至於父元素不會自動延展高度,而IE的會。實際上firefox是有遵從W3C標準的。而IE會自動延展高度是因為如果有設定寬高,會觸發haslayout(這是很常發生的)。在firefox底下以在父元素上加overflow:hidden來解(如果在父元素上加上float:left;或right,也可解。外國看到的範例比較多用這個解法,裡如wordpress裡面的設定就是用float而不用overflow。)
  2. firefox底下,第一個子元素的margint-top與最後一個子元素的margin-bottom會被父元素搶走。IE也會。這是符合W3C的margin塌陷。但是如果子元素有設定float,在IE底下因為會觸發haslayout,反而避開了塌陷問題。這個的解法同上,就是在父元素加上overflow:hidden;或float屬性。但是如果子元素沒有設定float,父元素設定overflow只會適用於iE7以上,IE6不適用。所以在IE6底下要用height:1%;的方式來解。

斯芬克斯之谜续——IE下失效的margin-left/right
這個應該是我有遇過,但是那時候沒有歸納出是這個原因。

ie hasLayout property – 終結 ie bugs 之「有編置」性質(ie only)
此篇是特性說明,有興趣的瞭解haslayout的可以參考看看。

absolute遇到float元件時起始點的算法

左一個float區塊,右一個absolute區塊,在FF、IE8以上,absolute設定margin-left,距離會是從body的0,0(不被左float區塊影響)算起。

照理來說absolute的起始點本來就不應該被其他的區塊影響,但是在IE6、IE7會。IE6、7的距離會是從float區塊的右邊算起。

IE6底下div高度小於12px時,依舊顯示為12px的bug

參考文章:http://www.zeali.net/entry/502

IE6雞婆的認為div高度不該小於一行行高。而IE預設字體大小大約為13px,因此當高度小於一個文字的高度時,例如6px,實際上顯示還是會有一行的高度。

解法是設定font-size:0px;,或是乾脆加上overflow:hidden;

此問題只會出現在IE6

a:hover em 在IE6底下失效的問題

在IE6底下,只有a可以使用像hover這樣的偽類。但是如果要用像a:hover em 去指定a內標籤的效果一樣還是會有問題。

解法參考文章:CSS实例:a:hover伪类在IE6下的问题

例如
<a href=”e”>測試<em>斜體</em></a>

然後css只有
a:hover em{color:#ccc;}

那這個效果在IE6不會生效。如果要使其生效,要在他前面加上
a:hover{font-size:13px;}

且a:hover內的屬性,隨便一個都可以。甚至打假的xxx:bbb;也行