css设置元素的宽高为整数,为什么有的浏览器解析出来的宽高是小数

html-css026

css设置元素的宽高为整数,为什么有的浏览器解析出来的宽高是小数,第1张

首先要明确,所有浏览器都会有一套内置的默认样式(否则你看到的页面不会是现在这样),而css样式本质上是覆盖新设定的属性覆盖旧有属性,然后还会和相邻元素、子元素发生联动互相影响。原理上来说,如果你给一个div设置width 100 height 100,在没有任何其他元素影响的情况下,这个值在任何浏览器解析下都应该是一致的。

如果有不一样,建议你用F12控制台,查查是否有其他优先级更高的设置影响了。

首先说下小数宽度在各个浏览器中的不同:

chrome,firefox,ie8 下小数会通过四舍五入的方式转成整数

而 ie6,ie7 会对小数进行下限取整转成整数

需要特别注意的是:ie7 中,直接按照四舍五入

所以不管你写多少位都会有浏览器不兼容,尤其是IE8以下的。

建议您百度一下:各浏览器对css百分比小数点的解析

IE6只会认33%不会认识后面的小数

通过测试分别修改宽度,然后在alert出div的宽度然后看在几位小数后宽度没变化就知道支持到几位了

测试谷歌会认识到33.333% 也就是小数后三位

其他的可以自行用上述方法测试,但是建议都使用整数,不考虑IE6可以到小数点后一位