2007-02-09

CSS怎麼配合各家瀏覽器做微調?

以FireFox跟IE比較padding、margin
FireFox: 設定padding時會影響width、height的寬、高度
IE:設定padding時不影響width、height的寬、高度

用法一 以FireFox為主製作,再對IE做微調
(08/07/01發現底線"_"IE7會判讀了,修正規則如下)
>:IE7以前的版本可以判讀
- :IE6以前的版本可以判讀
>、-:FireFox兩者皆忽略

Example:順序要照範例所寫,不同會有錯誤
div {
width: 98px;/*設定在FF中的寬度*/
>width: 118px;/*設定在IE7中的寬度*/
-width: 118px;/*設定在IE6中的寬度*/
height: 98px;/*設定在FF中的高度*/
>height: 118px;/*設定在IE7中的高度*/
-height: 118px;/*設定在IE6中的高度*/
padding: 10px;
>padding-bottom: 4px;
}

用法二 以FireFox為主製作,再對IE做微調
* +html:IE7可以判讀
* html:IE6以前的版本可以判讀

Example: 順序要照範例所寫,不同會有錯誤
#test {width: 98px; height: 98px;}/*設定在FF中的寬高*/
* html #test {width: 98px; height: 98px;}/*設定在IE6中的寬高*/
* +html #test {width: 98px; height: 98px;}/*設定在IE7中的寬高*/

沒有留言: