最近在開發項目時，發現瀏覽器對 CSS 小數點的處理出了一些問題，特來記錄一下。

一般而言，瀏覽器對小數點的處理是沒有問題的，例如下面這段代碼：

div {
font-size: 1.5rem;
line-height: 1.2;
margin-bottom: 0.5em;
padding: 1.5rem;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 0.5rem;
}

這段代碼使用了小數點來定義顏色的透明度。在大多數情況下，瀏覽器都能正確地解析這些小數值，并作出正確的渲染結果。

但在某些情況下，瀏覽器對小數點的處理會出現問題。例如，在某些瀏覽器（例如 Safari）中，使用小數點來定義長度值時，可能會出現錯誤的結果。

例如，下面這段代碼：

div {
width: 50.3%;
}

在某些瀏覽器中，這個元素的寬度可能會比預想的要大或要小。這是因為瀏覽器在計算這個元素的寬度時，會將小數點后的值四舍五入。因此，當這個值的小數點后為 0.5 時，可能會出現問題。

要解決這個問題，可以使用像素值來替代百分比值，或者使用calc()函數。

例如，下面這段代碼可以避免上述問題：

div {
width: calc(50% + 0.3px);
}

calc()函數會將兩個值加在一起，從而得到正確的計算結果。

需要注意的是，在使用小數點時，應該盡可能避免出現像 0.5 這樣的值，避免引起瀏覽器的判斷錯誤。