分析各瀏覽器對css百分比小數點反應

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

如：

1090px平均分6分，每份16.66%,chrome顯示各元素：

第2、4個元素：181px

第1、3、5、6個元素：182px

firefox及ie8及以上版本，雖然直接在調試器中看到的盒模型解析出來的是內層每個都是182px，但若將width:16.66%改成width:182px會頁面而已會變形走樣，由些我們可以推斷為firefox及ie8及以上版本瀏覽器對內層有作寬度“妥協”處理，跟chrome解析出來的效果是一樣的，只是沒在盒模型中提現出來而已!

另外 ie7 中，對小數點解析有誤，要加個hack處理下：設*width:16.65%

雖然ie7下解析有出入，但我們不用181px 去代替 16.66%，是因為16.66%能使內部各分割元素組成的整體在頁面上看上去是呈水平置中顯示，瀏覽器解析:16.66%*6 和181px* 6，前者總和比後者總和多3px，前者總和等於外層寬度，後者總和比外層寬度小3px！

其實，css百分比除下來值帶小數或者css百分比帶小數點，經測試，各瀏覽器都是支援的，只是ie7下差異表現明顯，最簡單的css百分比後除下來值帶小數例子：

外層寬度是 99px，內層有兩個元素浮動，寬度是 50%。

理論上內層寬度算下來是 49.5px，但實際上：

Chrome 中，第一個元素是 50px，第二個元素是 49px，加起來剛好和外層寬度一樣。即：

而firefox、ie8及以上，直接在調試器中看到的盒模型解析出來的是內層每個都是50px，但外層還是99px，據此我們可以理解為上述瀏覽器對內層有作寬度“妥協”處理，跟chrome解析出來的效果是一樣的，只是沒在盒模型中提現出來而已!

下面看一些例子

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

代碼如下

複製代碼

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>decimal</title>
<style type="text/css">
body{font-family:SimSun;text-align:center;}
p{margin:20px;height:30px;}
.font11-9{font-size:11.9px;}
.font11-4{font-size:11.4px;}
</style> www.111cn.net
</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{font-family:SimSun;font-size:30px;}
.black{background:black;width:500px;height:500px;margin-left:auto;margin-right:auto;overflow:hidden;color:white;}
.white{background:white;width:100px;height:100px;margin:0.9px;}
</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。

需要特別注意的是：ie7 中，直接按照四捨五入，內層兩個元素的寬度都是 50px，加起來超過外層寬度，即外層包容不下2個50px的內層，所以ie7下看到兩個內層是換行的！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More