起因:
项目开发过程中,需要计算一个div版块的高度为100% - 0.48rem,于是很自然的想到了:
.content {
height: calc(100% - 0.48rem);
overflow: scroll;
word-wrap: break-word;
word-break: normal;
}
打开控制台查看代码效果,却发现 高度和我预想的不对。而且99.52%这个数字似乎很眼熟,看了半天才发现99.52 = 100 - 0.48
显然,这个计算结果错得很远。
分析:
上网找了半天资料,才发现是因为less引起的。
less的计算方式跟calc方法有重叠:
在less中,calc(100% - 0.48rem)等带单位混合运算在less解析时,会被忽略单位,全部按照百分比计算,calc(100% - 0.48rem)就会被less编译成calc(99.52%);
解决办法:
下面两种写法都可以。
.content {
height:e("calc(100% - 0.48rem)");
overflow: scroll;
word-wrap: break-word;
word-break: normal;
}
.content {
height: calc(~'100% - 0.48rem');
overflow: scroll;
word-wrap: break-word;
word-break: normal;
}
第一种方法这个 e(calc("")) 我找了半天也没找到文档,不知道有没有大侠路过告知一下,为什么这样也可行。
第二种方法是应用了less的转义