由于边框折叠属性，HTML表有一条奇怪的粗体水平线。
由于边框折叠属性，HTML表有一条奇怪的粗体水平线。
提问于 2022-03-30 09:32:24
编辑1:问题似乎与CSS的边框折叠属性有关，因此可以通过使用边框间距: 0px来修复。但是，为什么边界崩溃会导致这种情况呢？它与缩放有关，就像你被放大或移出窗口一样，它会导致奇怪的粗体线条，但在我的例子中，我的浏览器设置为默认缩放，而系统(windows 11)也是建议的125% (我一直使用)缩放。我不明白怎么回事
最近，当我尝试创建一个HTML表时，我在一些行之后得到了一条奇怪的水平线。我已经附上了截图。代码是一个简单的HTML表和简单的CSS来添加边框，没有任何花哨。我会把密码附在这里。
table.html
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
</tr>
<?php while($user= mysqli_fetch_array($query)){ ?>
<tr>
<td><?php echo $user['id']; ?></td>
<td><?php echo $user['name']; ?></td>
<td><?php echo $user['phone']; ?></td>
<td><?php echo $user['email']; ?></td>
</tr>
<?php } ?>
</table>style.css
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2022-04-01 07:26:06
这是由于对浏览器进行不适当的缩放处理造成的。
例如，如果将1 1px边框和DPI Scaling设置为150%，则技术上边框为1.5px。因为浏览器不使用亚像素渲染，所以它在1px和2px之间交替。
处理这个问题有多种方法。
1。将border-width设置为0.01px
快速而肮脏的解决办法，因为浏览器至少会退回到1px。
2。使用resolution媒体查询
将边框宽度更改为每个缩放级别的适当小数。
@media (min-resolution: 120dpi) {
table, th, td {
border-width: 0.75px;
}
}
@media (min-resolution: 144dpi) {
table, th, td {
border-width: 0.666px;
}
}
@media (min-resolution: 192dpi) {
table, th, td {
border-width: 0.5px;
}
}以下是新闻部不同缩放级别及其值的概述
新闻部缩放级别
- 小型化100% (默认)= 96 dpi
- 介质125% = 120 dpi
- 大150% = 144 dpi
- 特大型200% = 192 dpi
F 221
3。JavaScript
使用JavaScript变量将边框宽度更改为每个缩放级别的适当小数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71674803
复制相关文章
相似问题
腾讯云开发者
