0

我有一个计算定义：

#navigation-panel {
     a, i.navEmptyBlock {    
        // ...
        width: -webkit-calc(12% - 2px);
        width: -moz-calc(12% - 2px);
        width: -o-calc(12% - 2px);
        width: -ms-calc(12% - 2px);
        width: calc(12% - 2px);

        @media (max-width: 640px) {      
          width: -webkit-calc(20% - 2px);
          width: -moz-calc(20% - 2px);
          width: -o-calc(20% - 2px);
          width: -ms-calc(20% - 2px);
          width: calc(20% - 2px);
        }
        // ...
    }
}

当在 640px 调整大小时，它应该应用新的计算，但它没有。

我已经使用 Google Developer Tools 进行了检查，新的 calc确实适用，但它并没有因为任何奇怪的原因覆盖旧的。

开发人员工具显示旧的已被划掉，但仍在应用！. 如果我禁用交叉的，它会起作用。

在firefox中尝试过，它可以工作。

似乎 chrome 不会覆盖-webkit-calc调用？

COMPASS 生成的代码：

#navigation-panel a, #navigation-panel i.navEmptyBlock {
  float: left;
  margin: 0 auto;
  text-decoration: none;
  color: #080808;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
  position: relative;
  width: -webkit-calc(12% - 2px);
  width: -moz-calc(12% - 2px);
  width: -o-calc(12% - 2px);
  width: -ms-calc(12% - 2px);
  width: calc(12% - 2px);
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  display: inline-block;
  border: 1px solid #3284b6;
  text-align: center;
  padding-top: 6px;
  height: 25px;
  font-family: Tahoma;
  font-size: 11px;
  /* Windows */
  background: rgba(255, 255, 255, 0);
  -webkit-transition: background 80ms;
  font-weight: 800;
  box-shadow: inset 0px 0px 6px rgba(255, 255, 255, 0.9); }
  @media (max-width: 640px) {
    #navigation-panel a, #navigation-panel i.navEmptyBlock {
      width: -webkit-calc(20% - 2px);
      width: -moz-calc(20% - 2px);
      width: -o-calc(20% - 2px);
      width: -ms-calc(20% - 2px);
      width: calc(20% - 2px); } }

编辑：普通宽度确实覆盖了第一个计算，但第二个计算覆盖了新的普通宽度但不适用！

4

1 回答 1

0

以某种方式将 webkit 的前缀放在重复的选择器中。

a, i.navEmptyBlock {    
        @media (max-width: 640px) {
          // fallback
          width: 18%;
          width: -webkit-calc(20% - 2px);         
        }
        @media (max-width: 565px) {
          // fallback
          width: 19%;
          width: -webkit-calc(20% - 2px);          
        }    
        @media (max-width: 355px) {
          // fallback
          width: 15.5%;
          width: -webkit-calc(20% - 2px);       
        }
      }
    a, i.navEmptyBlock {    
        float: left;
        text-decoration: none;
        color: $nav-panel-font-color;
        text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);   
        position: rela

过去; 宽度：12%； 

    width: -moz-calc(12% - 0.18em);
    width: -o-calc(12% - 0.18em);
    width: -ms-calc(12% - 0.18em);
    width: calc(12% - 0.18em);

    @media (max-width: 640px) {
      // fallback
      width: 19%;          
      width: -moz-calc(20% - 2px);
      width: -o-calc(20% - 2px);
      width: -ms-calc(20% - 2px);
      width: calc(20% - 2px);
    }
    @media (max-width: 565px) {            
      width: -moz-calc(20% - 2px);
      width: -o-calc(20% - 2px);
      width: -ms-calc(20% - 2px);
      width: calc(20% - 2px);
    }    
    @media (max-width: 355px) {           
      width: -moz-calc(20% - 2px);
      width: -o-calc(20% - 2px);
      width: -ms-calc(20% - 2px);
      width: calc(20% - 2px);
    }
于 2013-01-15T17:59:23.157 回答