媒体查询不覆盖 webkit calc答案

【问题标题】：Media Query not overriding webkit calc媒体查询不覆盖 webkit calc
【发布时间】：2012-12-03 13:28:57
【问题描述】：

我有一个计算定义：

#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);
        }
        // ...
    }
}

当调整为 640 像素时，它应该应用新的计算，但它没有。

我使用 Google Developer Tools 进行了检查，新的计算 DOES 适用，但它并没有因为任何奇怪的原因覆盖旧的。

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

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

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

【问题讨论】：

这是使用 LESS 还是 Sass？
@cimmanon 它是一个指南针应用程序。
你能发布相关生成的CSS而不是makros吗？
在小提琴中使用我假设生成的 CSS，它看起来应该可以工作（添加了一些额外的样式，以便您可以看到何时应用媒体查询）：jsfiddle.net/nPKVp/1。您在某处生成的 CSS 存在问题。
我已经更新了小提琴：jsfiddle.net/nPKVp/2。问题出在其他地方。

标签： css sass css-calc

【解决方案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);
    }

【讨论】：