CSS 小数处理

最新推荐文章于 2025-01-16 10:28:56 发布

weixin_34043301

最新推荐文章于 2025-01-16 10:28:56 发布

阅读量493

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/54855

本文通过一个简单的HTML页面展示了不同浏览器对CSS中小数值的处理方式，并提供了测试代码及结果，帮助理解浏览器如何处理带有小数点的CSS属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在不同浏览器或者同一浏览器的不同版本中，CSS 都会对小数进行取整（直接去除小数还是会根据小数的大小进行判断就不一定了）
测试代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        .class1 {
            width: 10.1px;
            height: 10.8px;
            border: 0px;
            background-color: Black;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var div1 = document.getElementById("div1");
            var clientWidth = div1.clientWidth;
            var offsetWidth = div1.offsetWidth;
            var scrollWidth = div1.scrollWidth;
            var ul = document.createElement('ul');
            var oLi1 = document.createElement('li');
            oLi1.innerHTML = "div.clientWidth=" + clientWidth;
            ul.appendChild(oLi1);
            var oLi2 = document.createElement('li');
            oLi2.innerHTML = "div.offsetWidth=" + offsetWidth;
            ul.appendChild(oLi2);
            var oLi3 = document.createElement('li');
            oLi3.innerHTML = "div.scrollWidth=" + scrollWidth;
            ul.appendChild(oLi3);


            var clientHeight = div1.clientHeight;
            var offsetHeight = div1.offsetHeight;
            var scrollHeight = div1.scrollHeight;
            var oLi4 = document.createElement('li');
            oLi4.innerHTML = "div.clientHeight=" + clientHeight;
            ul.appendChild(oLi4);
            var oLi5 = document.createElement('li');
            oLi5.innerHTML = "div.offsetHeight=" + offsetHeight;
            ul.appendChild(oLi5);
            var oLi6 = document.createElement('li');
            oLi6.innerHTML = "div.scrollHeight=" + scrollHeight;
            ul.appendChild(oLi6);
            div1.appendChild(ul);            
        }
    </script>
</head>
<body>
    <div id="div1" class="class1">
    </div>
</body>
</html>