Firefox显示不必要的水平滚动条

我试图实现的效果是这样的：我想要一个带有标题的文本行，并且在下面我需要一个表格。该表可能太高而不适合浏览器窗口，所以如果需要的话，我想要一个垂直滚动条。该表不应该太宽，所以不需要水平滚动条（但是如果需要，我仍然希望它显示出来）。无论哪种方式，我不希望标题滚动;因此，一个垂直滚动条出现，我滚动表格，标题应该是固定的。我试图设置一个<div>，它的宽度是浏览器决定需要显示表格的宽度（标题的宽度不会那么宽）。Firefox显示不必要的水平滚动条

这里就是我试过：（我最终会要允许超过100像素的表的高度，但我将它使我有机会测试滚动条）

<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>

这是我想要的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中的一个bug - 我给了它足够的空间来使用它所需要的水平空间，相反它使用的空间比它需要的少16px。谢谢你的答案，即使它很丑。 – ajb

@ajb我猜浏览器决定“空间”的含义是什么，在Firefox的情况下，滚动条在某些情况下不算作空间。 –

有趣的 - 我必须使它17px，而不是16px，才能使它工作。但它的工作。 – ajb

Firefox显示不必要的水平滚动条

回答

相关问题