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で試してみましたが、動作します。

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

編集:プレーンな幅は最初の calc をオーバーライドしますが、2 番目の cald は新しいプレーンな幅をオーバーライドしますが、適用されません!

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 に答える