inline與block的差異與用法

1. display:inline

  • 可解除float時，在IE6底下與float同邊的margin會變兩倍大的bug
  • 用li排橫排圖片連結的時候，設成inline就不需要使用float，可直接變成一排，此方法是只適用於圖片連結，且這時候li之間不能換行，否則會出現下列與圖片相同的有空格的問題。

2. display:blok

  • 當圖片放置出現莫名的空格的時候，原因來自於標籤換行後，在inline的狀態下瀏覽器會認為有空格，因此處理方法為把圖片設定成block即可解決
  • 上述問題通常也會出現在edm切版跟電子報切版。通常狀況是這樣：切版的時候<img>與後面的標籤是連在一起沒有換行、中間也沒任何空白的，這個時候顯示會正常。但是一旦<img>後面的標籤沒有直接接著、有換行，或是中間被加入空白（例如電子報寄出去的時候，有可能會自動換行或加入空白），這時候圖跟圖之間就會出現空格。實際排版時其實也很常遇到，只是通常圖片跟文字之間本來就會想要有距離，這時候這個問題就比較會被忽略。

圖片取代文字技巧（使用背景圖並隱藏box內文字的方法）

以下標籤是指屬於block的標籤，如果屬於inline，則先使用display:block做轉換

  • 方法一：
    如果文字只被一個標籤包住，則使用text-intent設定負值，讓字往左縮排，負值要夠大，例如-3000px
  • 方法二：方法一有個壞處，如果螢幕解析度很好的時候，總有一天還是會被看到字，所以後來我是用text-indent:-300px;搭配overflow:hidden;隱藏
  • 方法三：
    文字只被一個標籤包住的另外一種方式是設定很大的letter-spacing，例如100em，然後搭配指定height跟overflow:hidden;。
  • 方法四：
    如果文字被兩個標籤包住，裡面的標籤padding-top設定成跟外面標籤高度相同，外面的標籤設定overflow:hidden;這個方法我通常拿來用在網站標題要放logo的時候會這樣處理。

如何實現css圓角框

參考文章：css圖片圓角邊框實現方式 、7种CSS圆角框解决方案

不過考慮到跨瀏覽器，通常我還是用最笨的方法：分div去拼出來。如果只考慮垂直延伸。就是切成以下結構：
<div id=”all”>
<div id=”block-top”></div>
<div id=”block-center”></div>
<div id=”block-bottom”></div>
</div>

如果垂直延伸結構想要再省一點可以這樣切：
<div id=”all”>
<div id=”block-top”>
<div id=”block-bottom”></div>
</div>
</div>
但是這樣就要搭配無透明度的圓角背景圖。用透明png還是要切三塊，不然重疊的部份會有兩層png

解決子元素float而父元素高度無法自動撐高的問題

最佳解法：在父元素加上overflow:auto即可

其他解法

1.#C為父元素，使用:after

#C:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden; }

2.在float子元素最後加上一個div使用clear:both

3.在父元素加上float:left;（但如果不要底下的元素浮到旁邊，要搭配width:100%的設定，好處是子元素可使用負值的margin而不會被隱藏）

使用 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;的區塊會一直往下延伸很長很長。