就以的雜務筆記

UL、OL在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看的懂，所以別的瀏覽器不會讀後面的那些樣式檔。

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 屬性

css屬性的優先順序

以下列原始碼為範例：
<div id=”all”>
<div id=”sample”>
<span class=”s01″>test</span>
</div>
</div>

幾種設定方式的優先順序如下：
#all #sample span>#sample span>#all span>span.s01>.s01>span

PNG在IE6透明的方法

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

重點整理

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