CSS边框宽度与缩放一致

s2j5cfk0 于 2023-01-28 发布在其他

关注(0)|答案(2)|浏览(175)

我有一个4K显示器，Windows缩放比例设置为150%，Chrome缩放比例设置为100%。在我使用Bootstrap 4.5.2开发的网站上，这导致Chrome显示的表格边框粗细不一致。请注意下面的截图中有两组4条线比其他线粗（您可能需要缩放图像）：

下面是一个在Chrome 95.0.4638.69上重现此问题的小示例。在Chrome或Windows显示设置中将缩放设置为150%时，此问题均可重现。

<!DOCTYPE html>
<html>
    <head>
        <title>Annoying Borders</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    </head>
    <body>
        <table class="table table-sm">
            <thead>
                <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            </thead>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
       </table>
    </body>
</html>

我的理解是，这是由于舍入误差，计算出的边框厚度在1到2像素之间，所以Chrome有时显示1px，有时显示2px。在询问之前，我搜索并找到了一个建议的变通方案，即使用0.01px作为边框厚度。这确实有效，但它并没有真正解决根本原因，显然可能导致边框在某些浏览器上根本不显示。
当我检查像Stack Overflow或GitHub这样的网站的HTML时，他们使用1px作为div的边框宽度，和我一样，但是他们的边框总是一致的（例如，看看Stack Overflow上问题之间的边框，或者GitHub repo浏览器中文件之间的边框）。如果我放大的话，边框会变大到2px，但是所有的边框都会一致的变大。我已经在他们的CSS中摸索了很长一段时间，但是我不知道他们是怎么做到的。我是不是错过了一些神奇的CSS设置来解决这个问题？或者是div和表格单元格的边框表现有根本的不同？

css

来源：https://stackoverflow.com/questions/69828326/consistent-css-border-width-with-zoom

2条答案

按热度按时间

nle07wnf1#

最有可能的是，这是一个基于chrome的浏览器错误，因为Firefox浏览器可以适当地处理/呈现它。

您可以使用bug report link向chrome团队报告此错误
考虑对大屏幕进行媒体查询（例如，超过2k的屏幕将具有不同的边框大小）。

@media screen and (min-width: 2560px) {
  table, table * {
    border: solid 1px black !important;
  }
  /* or */
  * {
    border: solid 1px black !important;
  }
}

您可以根据自己的喜好更改最小宽度。此外，最好避免使用!important，并指定一个额外的Specificity（类，标签名）。

赞(0）回复(0）举报 2023-01-28

js81xvg62#

如果你只需要水平线（如图所示），这是一个痛苦的解决方案。不使用表格边框，而是将div-s放入每个td中，并设置这些div-s的顶部边框。此外，如果您需要在最后一个tr下添加边框，则必须添加一个内容高度为0的额外空tr。因此在视觉上它将仅仅是边界。

<html>
  <head>
    <style>
      /** ------------------------------------------------------------- */
      /** horizontal-borders-table                                      */
      /** ------------------------------------------------------------- */
      
      table.horizontal-borders-table {
        /* Get rid of unwanted spacing */
        border-collapse: collapse;
        border: 0;
      }
      .horizontal-borders-table td {
        /* Get rid of unwanted spacing */
        border: 0;
        padding: 0;
        vertical-align: top;
      }
      .horizontal-borders-table .td-content {
        border-top: var(--horizontal-border);
      }
      .horizontal-borders-table .closing-empty-tr .td-content {
        /* Ensure that we only have the border */
        padding: 0;
      }
      
      /** ------------------------------------------------------------- */
      /** Style for a specific table that uses horizontal-borders-table */
      /** ------------------------------------------------------------- */
      
      .example-table {
        --horizontal-border: 1px solid #000;
      }
      .example-table .td-content {
        /* Padding must be set on td-content, not on the td itself: */
        padding: 4px;
      }
    </style>
  </head>
  <body>
    <table class="horizontal-borders-table example-table">
      <tr>
        <td><div class="td-content">1</div></td>
        <td><div class="td-content">2</div></td>
        <td><div class="td-content">3</div></td>
      </tr>
      <tr>
        <td><div class="td-content">1</div></td>
        <td><div class="td-content">2<br>non-uniform</div></td>
        <td><div class="td-content">3</div></td>
      </tr>
      <tr>
        <td><div class="td-content">1</div></td>
        <td><div class="td-content">2</div></td>
        <td><div class="td-content">3</div></td>
      </tr>
      <tr class="closing-empty-tr">
        <td><div class="td-content"></div></td>
        <td><div class="td-content"></div></td>
        <td><div class="td-content"></div></td>
      </tr>
    </table>
  </body>
</html>

有些人可能想知道，是否可以将其推广到包含所有边界（整个网格），以及几乎所有边界，但是如果td内容高度在行中不一致，就会出现问题，因为您无法让div填充td的动态高度（据我所知）。

赞(0）回复(0）举报 2023-01-28

我来回答

CSS边框宽度与缩放一致

2条答案

最有可能的是，这是一个基于chrome的浏览器错误，因为Firefox浏览器可以适当地处理/呈现它。

相关问题

热门标签

最新问答