Firefoxは不要な水平スクロールバーを表示します

私が達成しようとしている効果は次のとおりです。タイトルが付いたテキスト行があり、その下にテーブルが必要です。テーブルがブラウザウィンドウに収まるには高すぎる可能性が高いので、必要に応じて垂直スクロールバーが必要です。テーブルは広すぎてはいけませんので、水平スクロールバーは必要ありません（でも、必要ならばそれを表示したいと思います）。いずれにせよ、私はタイトルをスクロールさせたくありません。したがって、垂直スクロールバーが表示され、私はテーブルをスクロールし、タイトルを修正する必要があります。私は<div>を設定しようとしています。その幅は、ブラウザがテーブルを表示するために必要とする幅です（タイトルはそれよりも小さくなりません）。ここでFirefoxは不要な水平スクロールバーを表示します

は、私が試したものです：

<html> 
    <head> 
     <title>Page title</title> 
     <style type="text/css"> 
     .mytab { border-style: solid; border-collapse: collapse } 
     table.mytab td { border-style: solid; border-width : 1px; 
          padding: 5px } 
     </style> 
    </head> 
    <body> 
     <div style="display: inline-table"> 
      <div style="padding-bottom: 10px; text-align: center">Table title</div> 
      <div style="height: 100px; overflow: auto"> 
       <table class="mytab"> 
       <tr><th/><th>Data1</th><th>Data2</th><th>Data3</th></tr> 
        <tr><td>AAAA</td><td>12348173</td><td>7598734</td><td>zioxuoiuf</td></tr> 
        <tr><td>BBBB</td><td>29834782</td><td>7895232</td><td>kuoiu2kjf</td></tr> 
        <tr><td>CCCC</td><td>98291123</td><td>io242o2</td><td>982734211</td></tr> 
       </table> 
      </div> 
      </div> 
    </body> 
</html>

（私は最終的には、テーブルの高さ以上100pxにできるようにしたいでしょうが、私はスクロールバーをテストすることができるように私はそれを設定してください。）

これは、Chrome（53.0.2785.116 m）では必要なものですが、Firefox（49.0.1）ではできません。 Chromeでは、ブラウザがテーブルを作成する幅を把握していて、その右側に垂直スクロールバーが追加されているようです。 Firefoxでは、ブラウザがテーブルをどのくらい幅広く描いているのかが分かりますが、垂直スクロールバーの内側には、の幅のボックスがテーブルの一部を隠しています。次に、テーブルのすべてを見ることができないので、水平スクロールバーを追加します。クロームと

外観：Firefoxで

外観：

（Firefoxが垂直テーブルのビット以下を表示しているように私には関係ありません。しかし、必要がない限り、水平スクロールバーが表示されないようにすることは間違いありません。）

これを修正してFirefoxでうまく動作させるにはどうすればいいですか？

出典

2016-09-28 ajb

ここでは、この問題が頻繁に発生しています。 Mozillaは単にChromeとは違ったレンダリングをしているようだ。

検査では、テーブルを含む最も内側の<div>に16ピクセルの右パディングを追加することでフォーマットの問題を解決できました。自分で確認できるので、垂直スクロールバーに十分なスペースが追加され、水平スクロールバーが表示されなくなります。

唯一の問題は、Chromeでスクロールバーが右端に大きく押し込まれることです。だから、私はCSSにチェックを入れて、Mozillaブラウザーにのみスタイルを適用しました。私はChromeとMozillaでテストしたところ、うまく見えました。ところで

<style type="text/css"> 
    .mytab { border-style: solid; border-collapse: collapse } 
    table.mytab td { border-style: solid; border-width : 1px; 
         padding: 5px } 
    @-moz-document url-prefix() { 
     .moz-div { padding-right: 16px; } 
    } 
</style> 


<div class="moz-div" style="height: 100px; overflow: auto">

、Mozillaの問題もIE（少なくともIE 10）に表示されますので、あなたはすべてのブラウザとデバイス間で確認し、それに応じてCSSを更新する必要があります。

出典

2016-09-28 05:01:04

これはMozillaとIEのバグとして私を襲っています。私は必要なだけ多くの水平スペースを使う余裕があり、代わりに16px以下のスペースを使います。たとえそれが醜いとしても、答えをありがとう。 – ajb

@ajb私はブラウザが "space"の意味を決めると思います。Firefoxの場合、スクロールバーは特定のコンテキストでスペースとして数えられません。 –

興味深い - それを稼働させるには、16pxではなく17pxにしなければならなかった。しかし、それは動作します。 – ajb

Firefoxは不要な水平スクロールバーを表示します

答えて

関連する問題