浏览器对CSS小数点的解析——坑
2017-03-08 19:33
239 查看
在写移动端项目时,为了将一个元素垂直居中,于是我将元素的高和行高设置成一样的,但是显示出来的结果,却让人不得其解,如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/09/3cff3abb7c35a10023bc34ee8a3f529f.png)
可以看到按钮的底部有一条缝隙,一开始以为是代码写错了,于是检查了一下,发现没啥问题,代码长下面这样。
检查代码没有问题后,用浏览器审查元素查看了一下按钮的大小(其实是先审查元素再看的代码),发现这个按钮的大小和我设置的不一样,如下图
footer的高
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/09/2cd347f8fb2467faac0f0a6efe7b69dc.png)
a的高
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/09/27516c7a13fd387bcc5b2d26352a313c.png)
a元素的高,小数点没了,而footer元素的高却有小数点,经过观察,是行高造成的,以下是我将高度去掉以后的结果
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/09/1294780bcf06a3ee76c5323aba4e0ef0.png)
将高度去掉以后,a和footer就一样高了,最后总结出来就是行高不支持小数点,而高度支持,而这里之所以会有那条缝隙就是因为行高没有占满整个高度,所以就留出来了一点空白。
想解决这个问题也很简单,就是不要去写高度,或者给a元素添加一个height:100%;这样a元素就和footer元素一样高了,因为如果子元素没有设置高度,高度将把行高作为高度,而行高默认继承的是父元素的行高。
目前所知道的,边框、行高、字体大小这些都是不支持小数点的。
虽然某些属性支持小数点,但是非常的不准确,网上说是四舍五入,但不完全是。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/09/3cff3abb7c35a10023bc34ee8a3f529f.png)
可以看到按钮的底部有一条缝隙,一开始以为是代码写错了,于是检查了一下,发现没啥问题,代码长下面这样。
<footer> <a href="javascript:;" class="submit">提交订单</a> </footer> footer { position: fixed; bottom: 0; left: 0; width: 100%; height: .539rem; line-height: .539rem } footer a { display: block; text-align: center; font-size: .188rem; color: #fff; background-color: #0fb8a8; }
检查代码没有问题后,用浏览器审查元素查看了一下按钮的大小(其实是先审查元素再看的代码),发现这个按钮的大小和我设置的不一样,如下图
footer的高
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/09/2cd347f8fb2467faac0f0a6efe7b69dc.png)
a的高
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/09/27516c7a13fd387bcc5b2d26352a313c.png)
a元素的高,小数点没了,而footer元素的高却有小数点,经过观察,是行高造成的,以下是我将高度去掉以后的结果
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/09/1294780bcf06a3ee76c5323aba4e0ef0.png)
将高度去掉以后,a和footer就一样高了,最后总结出来就是行高不支持小数点,而高度支持,而这里之所以会有那条缝隙就是因为行高没有占满整个高度,所以就留出来了一点空白。
想解决这个问题也很简单,就是不要去写高度,或者给a元素添加一个height:100%;这样a元素就和footer元素一样高了,因为如果子元素没有设置高度,高度将把行高作为高度,而行高默认继承的是父元素的行高。
目前所知道的,边框、行高、字体大小这些都是不支持小数点的。
虽然某些属性支持小数点,但是非常的不准确,网上说是四舍五入,但不完全是。
相关文章推荐
- 【转】不同浏览器CSS解析小结
- Firefox, IE等不同浏览器对JavaScript,CSS不同解析问题 (转备以后使用)
- 浏览器css解析的两种模式
- 浏览器的解析渲染原理以及js ,css 阻塞问题的分析
- WEB前端底层知识之浏览器是如何工作的(4)--Render树与CSS解析
- 浏览器不能正常解析CSS代码的解决
- (浏览器解析的)文档流与CSS
- 浏览器CSS解析的词法语法初步介绍
- CSS 浏览器兼容与解析
- WEB前端底层知识之浏览器是如何工作的(4)--Render树与CSS解析
- 小数在各个浏览器的差异及css用小数解析差异解决浏览器兼容性问题
- 浏览器如何加载和解析CSS——CSS样式来源与层叠规则
- 避免css中文字体在浏览器中解析成乱码
- Firefox, IE等不同浏览器对JavaScript,CSS不同解析问题
- 浏览器了解(三)CSS解析
- 避免css中文字体在浏览器中解析成乱码
- 浏览器-06 HTML和CSS解析2
- 【浏览器渲染原理】解析和DOM树构建之CSS解析
- 浏览器-05 HTML和CSS解析1
- 浏览器了解(三)CSS解析