chrome浏览器中的粗边问题

Question

边框折叠在chrome浏览器中不能正常工作。一些边界线看起来很粗。请看这张图片，帮我解决这个bug。

我需要所有行的轻便边框。但是突出显示的行边框看起来像粗体。为了测试的目的，请在链接中查看并删除背景色。请在chrome浏览器中签入。https://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy

​

Answer 1

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

在可能导致此问题的样式中看不到任何内容。此外，根据分数缩放的效果与浏览器渲染错误非常相似。

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

​