个人中心
gpt4 book ai didi

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

转载 作者：可可西里 更新时间：2023-11-01 13:47:45 25 4
gpt4 key购买 nike

我想要达到的效果是这样的:我想要一行带有标题的文本，在它下面我想要一个表格。该表格可能太高而无法放入浏览器窗口，因此如果需要，我想要一个垂直滚动条。表格不应太宽，因此不需要水平滚动条(但我仍然希望它在必要时显示)。无论哪种方式，我都不希望标题滚动；因此，出现一个垂直滚动条，我滚动表格，标题应该是固定的。我正在尝试设置 <div>其宽度是浏览器决定显示表格所需的宽度(标题将小于该宽度)。

这是我尝试过的:

<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 中，浏览器似乎计算出表格的宽度，但随后将垂直滚动条放置在具有该宽度的框内，从而遮挡了表格的一部分。然后它会附加一个水平滚动条，因为您看不到整个表格。

Chrome 的外观:

Appearance with Chrome

Firefox 的外观:

Appearance with Firefox

(Firefox 垂直显示的表格少了一点对我来说无关紧要。但除非必要，否则我绝对不希望显示水平滚动条。)

我怎样才能解决这个问题，让它在 Firefox 中正常工作？

最佳答案

我们在这里的工作中经常遇到这个问题。似乎 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。

关于html - Firefox 显示不必要的水平滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39738265/

25 4 0
文章推荐： c# - 有没有办法为 UserPrincipal.FindByIdentity() 启用推荐追踪？
文章推荐： PHP fopen() 不创建文件
文章推荐： php - 用于 pi_getLL 的 TYPO3 Extbase 代码？
文章推荐： c++ - 为什么在调试过程中有时窗口标题黑色和按钮无框
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com