css 利用小數解析差異解決瀏覽器相容性問題

2021-09-06 07:11:54 字數 1803 閱讀 3619

通常我們寫 css 的時候寫的數字都是整數,如 font-size:12px; margin:20px; 那麼看到標題可能有人會問,css 屬性值可以有小數點麼?如果是小數那會顯示成什麼樣子?和整數有什麼區別?

首先我們先看個例子,通過例子來觀察下小數在各個瀏覽器的差異。

doctype html

>

<

html

lang

="en-us"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>decimal

title

>

<

style

type

="text/css"

>

body

p.font11-9

.font11-4

style

>

head

>

<

body

>

<

p class

="font11-9"

>這段文字的大小是11.9畫素。

p>

<

p class

="font11-4"

>這段文字的大小是11.4畫素。

p>

body

>

html

>

我們可以看出在 chrome,firefox,ie8 下小數會通過四捨五入的方式轉成整數,而 ie6,ie7 會對小數進行下限取整轉成整數。通過這一特性我們在某些情況下,用小數來替代 css hack。譬如:

doctype html

>

<

html

lang

="en-us"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>decimal

title

>

<

style

type

="text/css"

>

body

.black

.white

style

>

head

>

<

body

>

<

div

class

="black"

>

<

div

class

="white"

>

div>

<

p>在ie6,ie7下紅色塊離黑色塊沒有外邊距,而其他的瀏覽器則有 1px 外邊距。一般我們是寫css hack,如margin:1px;*margin:0;但是我們現在可以通過小數來解決啦。

p>

div>

body

>

html

>

不僅僅縮短的**的長度,還去掉了 css hack。

總結:雖說這個小數解決一些相容性問題很神奇,但是它的缺點也很明顯,就是適用範圍,只能解決相差1畫素的瀏覽器差異,只能解決ie6,ie7 下值小1畫素的瀏覽器差異。

瀏覽器:chrome,firefox,ie8,ie7,ie6

css 利用小數解析差異解決瀏覽器相容性問題

通常我們寫 css 的時候寫的數字都是整數,如 font size 12px margin 20px 那麼看到標題可能有人會問,css 屬性值可以有小數點麼?如果是小數那會顯示成什麼樣子?和整數有什麼區別?首先我們先看個例子,通過例子來觀察下小數在各個瀏覽器的差異。doctype html html...

css 利用小數解析差異解決瀏覽器相容性問題

通常我們寫 css 的時候寫的數字都是整數,如 font size 12px margin 20px 那麼看到標題可能有人會問,css 屬性值可以有小數點麼?如果是小數那會顯示成什麼樣子?和整數有什麼區別?首先我們先看個例子,通過例子來觀察下小數在各個瀏覽器的差異。doctype html html...

利用小數解析差異解決瀏覽器相容性問題

通常我們寫 css 的時候寫的數字都是整數,如 font size 12px margin 20px 那麼看到標題可能有人會問,css 屬性值可以有小數點麼?如果是小數那會顯示成什麼樣子?和整數有什麼區別?首先我們先看個例子,通過例子來觀察下小數在各個瀏覽器的差異。這段文字的大小是11.9畫素。這段...