CSS 小数 处理

简介: 在不同浏览器或者同一浏览器的不同版本中,CSS 都会对小数进行取整(直接去除小数还是会根据小数的大小进行判断就不一定了) 测试代码:<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8

在不同浏览器或者同一浏览器的不同版本中,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>

测试结果:
这里写图片描述
这里写图片描述
这里写图片描述

作者:jiankunking 出处:http://blog.csdn.net/jiankunking

目录
相关文章
|
6月前
|
前端开发
css 2D转换
css 2D转换
35 0
|
6月前
|
前端开发
CSS字型
CSS字型。
40 5
|
6月前
|
数据采集 缓存 前端开发
css的类型
【4月更文挑战第20天】css的类型
55 10
CSS-实现省略号
省略号作用 在制作网页的时候,经常会遇到文字内容太多超出部分省略的情况 我们可以把这个类设置在公共样式里,需要的时候随时调用
|
6月前
|
UED
css3 2D与3D转换
css3 2D与3D转换
72 0
|
前端开发 UED
css中转换有哪些(2D、3D效果)?
css中转换有哪些(2D、3D效果)?
77 0
|
前端开发
CSS3的转换
通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。 您可以使用 2D 或 3D 转换来转换您的元素。
60 1
|
前端开发 JavaScript
CSS数据类型以及符号
CSS数据类型以及符号
106 0
|
前端开发
css中的2D转换
CSS2D转换 今天给大家带来的是css经常用到的属性,不管是元素旋转还是元素移动,都是用到了css3的transform属性,今天我们就来看看这个属性的用法。
|
前端开发
CSS2D转换
今天给大家带来的是css经常用到的属性,不管是元素旋转还是元素移动,都是用到了css3的transform属性,今天我们就来看看这个属性的用法。