分類: css

UL、OL在Firefox和IE下的差異

參考文章：UL在Firefox和IE下的不同表現

詳細的內容直接看參考文章囉。
簡單來說，ul、ol在firefox跟ie底下的預設值不同。在firefox預設有padding沒margin。在IE預設有margin沒padding。

我覺得要個別處理很麻煩，所以通常都會導入一個reset.css。在裡面把大部份預設有margin、padding的元素(例如body、h1~h6、p、ul、ol)直接都設定為0。有需要的時候才手動給值。這樣比較單純。

條件注釋相關說明

參考文章：關于條件注釋的幾個實例代碼

如果要針對IE6、IE7、IE8下不同的css，有很多種方法，目前我是用特殊字元的方式(在樣式前面加上*、_、 或尾巴加\8)。因為做起來最省事。但是這種作法的缺點是無法通過W3C CSS驗證。

那如果想要通過驗證，就得用【條件注釋】的方法來做。

應用方式如下
<link rel=”stylesheet” media=”all” type=”text/css” href=”style.css” />
<!–[if lte IE 6]>
<link rel=”stylesheet” media=”all” type=”text/css” href=”style-ie6.css” />
<![endif]–>
<!–[if lte IE 7]>
<link rel=”stylesheet” media=”all” type=”text/css” href=”style-ie7.css” />
<![endif]–>
<!–[if lte IE 8]>
<link rel=”stylesheet” media=”all” type=”text/css” href=”style-ie8.css” />
<![endif]–>

因為條件注釋只有IE看的懂，所以別的瀏覽器不會讀後面的那些樣式檔。

 

 

CSS中link與import比較

參考文章：CSS中link與import比較

link使用範圍：
因為是HTML語法，所以只能用在HTML網頁中

import使用範圍：
屬於CSS語法，所以可用於網頁中的樣式定義，也可用於樣式檔案中

link瀏覽器載入樣式表時機：
讀到標籤時不會載入樣式檔，待讀到使用樣式的標籤時，才載入樣式檔內容

import瀏覽器載入樣式表時機：
讀到@import指令即立該載入樣式檔內容

參考資料：
最新PHP+MySQL+AJAX網頁程式設計(旗標出版)

CSS white-space 属性

參考文章：CSS white-space 属性

normal：（預設）多個半形空白只會顯示一個空白，一定要有br才會換行，遇到邊界會自動換行

pre：同<pre>標籤，保留多個半形空白、無br的換行（在段落裡只是換行但沒用br，顯示出來還是會有換行）、一段內容如果超過一行，遇到邊界不會自動折行，

nowrap：不保留多個空白（多個半形空白會只顯示1個半形空白）與無br的換行，一段內容如果超過一行遇到邊界不會自動折行。除非有br才會折行

pre-wrap：保留多個半形空白、無br的換行，但是一段內容如果超過一行，遇到邊界會換行

per-line：不保留多個空白，但是保留無br的換行，且一段內容超過一行，到邊界會換行

inherit：從父層元素繼承wite-space 屬性

PNG在IE6透明的方法

參考文章：PNG在IE6透明的方法、讓IE支持PNG透明的最好用的方法

重點整理

  1. 如果圖片是用img放在html內，使用css引入ie6png.htc的方式解。但是這方法不知道是我用的時候有問題還怎樣，用不太起來，不過我確實有在別的系統看過這樣的解法，而且好像是連用背景圖都可以這樣解。
  2. 所以如果同1的狀況，我使用的解法是在頁面導入pngfix.js。參考文章：
    PNG in Windows IE: How To Use，裡面有這個js可下載
  3. 內容圖、背景都可以用的修法是IE PNG fix，不過如果要修不同位置，要調整多個htc。參考文件：IE PNG Fix 2.0 Alpha 4
  4. 如果是css使用背景圖，在IE6底下可改用fliter，如下
    background-image: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/test.png’, sizingMethod=’crop’);
  5. 但是在IE6底下用PNG背景會有另外一個問題：如果該元素內有放文字、放超連結，會無法選取，當然連結也無法點選，就好像有個透明的東西蓋住讓你不能按。原因不明，總之在png背景的物件上在加上position:relative;即可

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的時候會這樣處理。