chrome 浏览器中的粗边框问题

Question

边框折叠在 chrome 浏览器中无法正常工作。一些边界线看起来很粗。请查看此图片并帮助我解决此错误。

我需要所有行的精简边框。但突出显示的行边框看起来像粗体。出于测试目的，请参阅 link 并删除背景颜色。请在 chrome 浏览器中查看。 https://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy

Answer 1

检查您是否放大了页面？按 Ctrl+0 将缩放重置为 100%。

在样式中看不到任何可能导致这种情况的内容。而且这个效果也很像浏览器根据分数缩放渲染的bug。

从 Result size: 753x… 可以假设您的屏幕宽度为 1920px 并且您将其缩放到 1.25 :-)

Answer 2

这与用户缩放浏览器无关。这是 Windows 显示缩放比例，现在在某些设备上默认为 125%。由此产生的边框折叠在 80% 浏览器缩放时看起来很正常，但在 100% 时看起来异常。

我发现设置border: 0.5px solid;可以有效解决问题。

Answer 3

有多种方法可以实现这一点，当然 CSS 边框或线条的最小宽度为 1px，不能低于 1px。

我们实际上不能让它更薄，但我们可以让它看起来更薄。

选项 1：保持颜色接近背景颜色会使 1px 的线条看起来比 1px 更细

选项 2：border-color:#dddddd50; 降低颜色不透明度以达到相同的结果，此处十六进制末尾的 50 (dddddd) 代码定义不透明度 00 to 99 请注意您不能在十六进制代码末尾添加 100。

table{
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #dddddd50;
  padding: 8px;
}

<table id="customers">   
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris spécialités</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
    <tr>
    <td>Paris spécialités</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
</table>

chrome 浏览器中的粗边框问题

Thick border issue in chrome browser

html

css

google-chrome