css - 媒体查询不覆盖 webkit 计算

Question

我有一个计算定义:

#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 开发人员工具进行了检查，新的计算器确实适用，但由于任何奇怪的原因它没有覆盖旧的计算器。

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

在 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); } }

编辑:普通宽度确实会覆盖第一个计算，但第二个计算会覆盖新的普通宽度但不适用!

Answer 1

将 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);
    }