2011-11-16 14 views
14

私はFirefoxでCSSメディアクエリに問題が生じています。私は2つのDIVを作成し、スクロールバーが必要なように、Chromeで正しく機能します。 firefoxの画面サイズを800pxまで減らすと、DIVが崩壊し、いくつかのピクセル後にメディアクエリが機能しますが、それはChromeでは発生しません。問題(スクロールバー)

チェックこのフィドルhttp://jsfiddle.net/RMvqC/2/

+1

+1私も、私は@mediaすべてと 'などのメディアクエリのために殺すのと同じ問題 – sandeep

+3

直面(最大幅:CALC(980px +スクロールバーの幅))' – mm201

答えて

6

Firefoxの&のWebkitベースのブラウザは違ったスクロールバーをレンダリングします。 Firefoxでは、MediaQueryは画面幅で15pxのスクロールバーの幅を考慮しましたが、Webkitベースのブラウザでは画面幅のスクロールバーとはみなされません。だから、浮かれたDIVはFirefoxで崩壊してしまったのです。

私はCSSでいくつかのものがのはあなたを助けることもありました。あなたはCSSハックを使用することによって、かなり簡単にFirefoxのためのソリューションを実装することができます

 html { 
      /* force scrollbars */ 
      height: 101%; 
     } 
     body { 
      margin: 0; 
      padding:0; 
      white-space:nowrap; 
     } 
     #box1, 
     #box2 { 
      display:inline-block; 
      width: 400px; 
      height: 200px; 
      vertical-align:top; 
      white-space:normal; 
     } 
     #box1 { 
      background: #ce0000; 
      margin-right:-5px; 
     } 
     #box2 { 
      background: #8e0000; 
     } 

     @media screen and (max-width: 799px) { 
      body { 
       white-space:normal; 
      } 
      #box1, 
      #box2 { 
       width: 300px; 
      } 
     } 
+5

をこのような痛みは、これが私がフロントエンドをときどき/ほとんどの時間嫌いな理由です –

+1

これはChrome 29の周りで変更されています。スクロールバーがメディアクエリの計算に関してページの幅に含まれるようになりました。 –

0

this fiddleを確認してください)。余分な<div>であなたのコンテンツをラップした後、あなたのCSSに、この行を追加します。

/* Firefox-Hack */ 
body, x:-moz-any-link { 
    overflow-x: hidden; 
} 
#wrapper, x:-moz-any-link { 
    margin: 0 -7.5px; 
} 

を使用すると、別のメディアクエリを追加することができ、より豊かな応答性の経験を持っているためにjsbin(jsfiddleが今ダウンしている)

を確認します。another jsbin

CSSハックがpaulirish.comで発見された

7

Firefoxの& OperaはMEDでスクロールバーの幅を含めることであるW3Cの仕様を以下のiaクエリの幅(a comment hereで説明されているように無限ループを避ける理由があるかもしれません)、Webkitはそうではありません。

回避策があります(これはFFでしかテストしていません)あなたがスクロールバーを常に表示するように強制すると、明らかに幅はWebkitと一貫しています。ここでは、コードです:

html 
{ 
    overflow:hidden; 
    height:100%; 
} 
body 
{ 
    position:relative; 
    overflow-y:scroll; 
    height:100%; 
    -webkit-overflow-scrolling:touch; /* So iOS Safari gets the inertia & rubber-band effect */ 
} 

あなたはFF &のみオペラにこれを適用する場合は、CSSハックに頼ることができます。

/* Firefox */ 
@-moz-document url-prefix() 
{ 
    html 
    { 
     overflow:hidden; 
     height:100%; 
    } 
    body 
    { 
     position:relative; 
     overflow-y:scroll; 
     height:100%; 
     /*-webkit-overflow-scrolling:touch;*/ 
    } 
} 

/* Opera */ 
x:-o-prefocus, html 
{ 
    overflow:hidden; 
    height:100%; 
} 
x:-o-prefocus, body 
{ 
    position:relative; 
    overflow-y:scroll; 
    height:100%; 
} 

言うまでもなく、注意すべき点は、スクロールバーが表示されますですいつでも、それは大丈夫な妥協であろう。

12

私は私のプロジェクトの頭の中で「mqGenie」ジャバスクリプトを呼び出すことで、この問題を解決しました。

は今私のメディアクエリの幅がでたりscroolbarsなしクローム、サファリ、FirefoxとIE上で(同じ値で)正常に動作します。

このJavaScriptは、彼らが意図したサイズに発砲して、ビューポートの幅のスクロールバーの幅を含めるブラウザでCSSメディアクエリを調整します。

このURLからダウンロードできます。

http://stowball.github.io/mqGenie/

+0

これは、ブラウザの動作不良に対応するために、より多くのjavascriptを私のプロジェクトに追加することを恐れるほどの真の解決策です。最低でも1.2KB未満の非常に軽量なクロッキングです。私は実際にこのソースを自分のページに埋め込むかもしれません。 –

+0

私はこれを使用して汚い感じが、私の問題を解決するための唯一の方法と思われる。 – mm201

+0

これはまさにメディアクエリーがすべきことです。非常に不満なバグを解決していただきありがとうございます。 – KillahB

0

これは末梢関連しているが、私は、ブラウザが実際にせずに、任意の時点で使用しているメディアクエリを検出する方法を発見スクロールバーとボディの幅で動き回る...

基本的には、あなたの身体のどこかに絶対的に配置された1-x-1ピクセルのサイズのリストを定義し、「監視可能」にしたい各メディアクエリ条件のリストアイテムを定義します。

各メディアクエリ定義では、対応するリストアイテムを表示/非表示にして、そのアイテムがスクリプト内から見えるかどうかを単純にチェックします。

例:

<body> 
    ... 
    <ul id="mediaQueryHelper"> 
     <li id="desktop"></li> 
    </ul> 
</body> 

<style type="text/less"> 
    #mediaQueryHelper { 
     position: absolute; 
     height: 1px; 
     width: 1px; 
     visibility: hidden; 
     top: -999px; 
     left: -999px; 
    } 

    @media screen and (min-width: 481px) 
    { 
     #desktop { display: inline; } 
    } 

    @media screen and (min-width: 320px) and (max-width: 480px) 
    { 
     #desktop{ display: none; } 
    } 

</style> 

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     var _desktop = $("#desktop"); 

     $(window).resize(function() { 
      console.log("media-query mode: " + _desktop.is(":visible") ? "DESKTOP" : "MOBILE"); 
     }); 
    }); 
</script> 
関連する問題