我有一臺 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>
My understanding is that this is due a rounding error where the calculated border thickness is somewhere between 1 and 2 pixels, so sometimes Chrome shows 1px and sometimes 2px. Before asking, I searched and found a suggested workaround of using 0.01px for border thickness. This does work, but it doesn't really address the root cause, and apparently can cause border not to display at all on some browsers.
When I inspect the HTML for sites like Stack Overflow or GitHub, they are using 1px for the border widths on their divs, the same as me, but their borders are always consistent. For example, look at the borders between questions on Stack Overflow, or the borders between files in the GitHub repo browser). Zooming does affect the border width on these sites; if I zoom way in, the border grows to 2px, for example, but all of the borders grow consistently. I have poked around in their CSS for quite some time but I can't figure out how they did it. Am I missing some magic CSS setting that fixes this problem? Or do the borders on divs and table cells behave fundamentally differently?
uj5u.com熱心網友回復：
最有可能的是，這是一個基于 chrome 的瀏覽器錯誤，因為 Firefox 瀏覽器會適當地處理/呈現它。
您可以使用此錯誤報告鏈接向 chrome 團隊報告錯誤
考慮對大螢屏進行媒體查詢（例如，超過 2k 會有不同的邊框大小）。
@media screen and (min-width: 2560px) {
table, table * {
border: solid 1px black !important;
}
/* or */
* {
border: solid 1px black !important;
}
}
您可以根據自己的喜好更改最小寬度。此外，最好避免使用!important和指定一個額外的特殊性（類、標簽名稱）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/346908.html
標籤：html css google-chrome
上一篇：加載chrome擴展并查找當前網站javascript
下一篇：無法在Release或Profile中運行flutterweb專案（無法讀取null的屬性（讀取“isAsync”））