最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】Preact中布局样式style.less中的calc不生效

Preact crifan 1099浏览 0评论

参考别人的代码:

springalskey/picker: react mobile picker选择器,一级、二级联动,三级联动城市选择器

去使用:

.modal_overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom:0;
  z-index: 1000;
  background-color:rgba(11,11,11,0.4);
  width: 100%;
  .modal {
    position: fixed;
    top: calc(100% – 260px);
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1001;
    background-color: #fff;
    width: 100%;
    height: 260px;
  }
}

但是结果生成的页面中,calc没有生效,导致页面中看不到弹出页面:

然后此处,去掉top属性,才可以看到页面:

此处的top变成了:calc(-160%)

从而没有其效果

现在随便改变值,比如100px,就可以看到效果:

所以,觉得应该是:

less的css中calc没有生效。

reactjs less calc

css – Less Aggressive Compilation with CSS3 calc – Stack Overflow

css3 – Disable LESS-CSS Overwriting calc() – Stack Overflow

less中解决CSS3的calc冲突问题 – 笨兔子 – SegmentFault

Usage | Less.js

【总结】

把:

    top: calc(100% – 260px);

改为:

    top: calc(~"100% – 260px");

果然就生效了:

此处top值就是:calc(100% – 260px)

可以正常工作了。

转载请注明:在路上 » 【已解决】Preact中布局样式style.less中的calc不生效

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
63 queries in 0.104 seconds, using 18.70MB memory