close
css其實最麻煩的部份可能就在相同的css設定在不同的瀏覽器卻不同, 以表單按紐的來說, 就有許多差異。

相同效果者:
(字體)
font-size（字體大小)
color (字體顏色)
font-style: italic; (斜體,偏斜體)
 font-weight: bold; (粗體)
 font-weight: 600;
(背景)
 background-color: #0000FF; (按鈕背景顏色)
 background-image: url(); (按鈕背景影像)
 background-position: center center; (按鈕背景影像位置)
 background-position: 20px 20px;　(按鈕背景影像位置, 有作用, 但位置稍微不同)
(區塊)
 text-indent: -10px; (文字縮排)
(方框)
 height: 120px;   width: 100px; (高度, 寬度)
 margin: 20px; (邊界, 上下左右各20px)
 padding-top: 40px; (單獨設定上欄位間隔)
 padding-top: 70px;  padding-bottom: 120px; (同時設定上下欄位間隔, 且總和超過按鈕高度, 兩者效果不同, IE7會維持按鈕高度, 文字可能被推出按鈕外不顯示Firefox會擴張按鈕高度, 文字一定會顯示)
IE7:  Firefox:


(邊框)
 border: 4px dashed #FF0000; (邊框樣式, 兩者都有作用但表現不同, IE7邊框線的中央會落在按鈕框邊緣線上. Firefox邊框線會完全在按鈕邊緣內部)
IE7:  Firefox:


效果不同者: 作用:IE7, 無作用: Firefox
line-height: 2; (兩倍行高),  line-height: 50px;  line-height: 2cm; (行高2cm),
line-height: 50pt;  line-height: 2in;  line-height: 200%;
(以上在IE7會影響按鈕高度, Firefox則無作用)
 text-decoration: line-through; (刪除線)
 text-decoration: overline; (上端線)


效果不同者: 作用: Firefox, 無作用:IE7
text-decoration: blink; (字體閃爍)


這邊尚未完全整理出所有差異, 因為有些情況會在同時設定某項值的時候才會出現差異, 例如上面同時設定上下欄位間距的情形, 難怪有人認為深入學習css就跟學程式語言差不多!


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 Jikky 的頭像
    Jikky

    咖啡戒斷症候群

    Jikky 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄