媒体查询不重写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); 
     } 
     // ... 
    } 
} 

当640像素，大小应适用新的计算，但事实并非如此。

我检查与谷歌开发者工具和新的计算DOES适用，但它没有覆盖旧的任何奇怪的原因。

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

尝试在Firefox中，它的工作原理。

这似乎铬不覆盖-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); } } 

编辑：平原宽度不覆盖第一钙，但第二CALD覆盖新平宽度，但并不适用！

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 

tive; 宽度：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); 
    }