我一直在嘗試將 hr 的高度設定為 0px，任何其他數量似乎都可以，并且兩者匹配。我也會在底部發布我的代碼。我不確定這是 CSS 問題還是 HTML 問題。任何解釋將不勝感激。
這是我用它制作的 CSS 代碼的兩個 hr 元素，但兩者看起來都不一樣
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Personal Website</title>
<style>
body{
background-color: #97BFB4;
}
hr {
background-color: whitesmoke;
border-style: dotted;
height : 0px;
width: 10%;
}
</style>
</head>
<body>
<table cellspacing= "20">
<tbody>
<tr>
<td><img src=""></td>
<td>
<h1> <a href="">Personal
Site </a></h1>
<p><em> Computer Engineer at Stony Brook University </em></p>
<p>
</p>
</td>
</tr>
</tbody>
</table>
<hr>
<h3><a href="">Experience</a></h3>
<table>
<thead>
<th>
Dates
</th>
<th>
Work
</th>
</thead>
<tbody>
<tr>
<td>June 2021</td>
<td>Undergraduate Researcher</td>
</tr>
<tr>
<td>Sept 2020</td>
<td>Vice President Of Robotics</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<hr>
</body>
更新前：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Personal Website</title>
<style>
body{
background-color: #97BFB4;
}
hr {
background-color: whitesmoke;
border-style: dotted;
border-width: 2px 0 0 0;
height : 0px;
width: 10%;
}
</style>
</head>
<body>
<table cellspacing= "20">
<tbody>
<tr>
<td><img src=""></td>
<td>
<h1> <a href="">Personal
Site </a></h1>
<p><em> Computer Engineer at Stony Brook University </em></p>
<p>
</p>
</td>
</tr>
</tbody>
</table>
<hr>
<h3><a href="">Experience</a></h3>
<table>
<thead>
<th>
Dates
</th>
<th>
Work
</th>
</thead>
<tbody>
<tr>
<td>June 2021</td>
<td>Undergraduate Researcher</td>
</tr>
<tr>
<td>Sept 2020</td>
<td>Vice President Of Robotics</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<hr>
</body><hr>標簽和第二個標簽的方式之間似乎沒有任何真正的區別。如果有人可以解決這個問題，以防其他標簽出現問題，我們將不勝感激。另外，我會放之前和之后的代碼片段。
更新后：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Personal Website</title>
<style>
body{
background-color: #97BFB4;
}
hr {
/* background-color: whitesmoke; */
border-style: dotted none none none;
border-color: grey;
border-width: 5px;
height : 0px;
width: 10%;
}
</style>
</head>
<body>
<table cellspacing= "20">
<tbody>
<tr>
<td><img src=""></td>
<td>
<h1> <a href="">Personal
Site </a></h1>
<p><em> Computer Engineer at Stony Brook University </em></p>
<p>
</p>
</td>
</tr>
</tbody>
</table>
<hr>
<h3><a href="">Experience</a></h3>
<table>
<thead>
<th>
Dates
</th>
<th>
Work
</th>
</thead>
<tbody>
<tr>
<td>June 2021</td>
<td>Undergraduate Researcher</td>
</tr>
<tr>
<td>Sept 2020</td>
<td>Vice President Of Robotics</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<hr>
</body>uj5u.com熱心網友回復：
這并不是真正不同的行為。
每當數字不完全對齊時，這種行為就會發生在整個網頁上。
- 你如何渲染 99px 的影像
width: 100px;？ width: 33.3%;-container 中的 -div是多少像素寬100px？
答案將涉及四舍五入數字，使它們上升一點或下降一點。您在這里看到了相同的效果，在高壓下邊界對齊方式不同。
如果不是你的<hr>，而是一個大致100px的100px塊，那么你將無法判斷邊界在不同情況下何時略有不同。
在您的情況下，在上面的示例中，您的邊框<hr>最終顯示為3 pixel 高組件，而在下面的示例中顯示為2 pixel。我猜這包括：
1px對于邊界頂部1px對于邊框底部- 邊框之間的內容為 0px 或 1px（由于向上或向下舍入）。
如果我在這些高壓條件下繼續制作 hr 標簽，我應該期待更多的變化嗎？即，如果我添加更多高度為 0 的 hr 標簽，它們會隨機位于 [0,1] 像素之間嗎？
薩特
不，我懷疑不是。在您的情況下，它要么向上取整，要么向下取整，實際上并沒有其他結果。
事情最終被四舍五入為最小支持（子）單位的整數（我想在這種情況下為 1 像素）。
有可能，如果在高度之上是這樣一個狡猾的邊緣情況（舍入可以決定它的成敗），寬度也是這樣的邊緣情況，那么你可能會有一些不同的可能最終結果。一種width: 0.5px; height: 0.5px;情況。
但是，對于任何設計師而言，您要么希望清楚自己想要什么（例如：提供整數，而不是部分像素），要么希望有條件使結果正常。
如果您的網站有一個包含大量文本段落的內容區域，width: 1207.5px;那么無論它最終是1207px或1208px，它看起來都很好，沒有人能夠分辨。
uj5u.com熱心網友回復：
好的，我們知道 0 沒有任何意義。當值為空時，我們使用 0。現在，您在 CSS 中說，使 hr 的高度為 0px。這意味著沒有價值。因此，如果沒有單個 px，它就無法在顯示中向您顯示任何內容。這就是為什么 0px 不存在的原因。希望你明白了。
uj5u.com熱心網友回復：
從理論上講，您所做的一切都很好，理論上具有帶邊框的零高度元素沒有問題。
但是，CSS 像素在許多現代螢屏上并沒有與螢屏像素一一對應。一個 CSS 像素可以使用多個螢屏像素。
因此，當系統必須準確決定將東西放在哪里時，就會產生邊緣效應。您有時可以通過縮放看到這一點。在你的例子中試試這個，你可能會看到不需要的白線在不同的放大倍數下來來去去。
因此，為了回答您的一個疑問，是的，這是需要避免的。在您的情況下，嘗試僅將頂部邊框設定為兩倍高度而沒有其他邊框，看看會發生什么。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/397294.html
上一篇：使用CSS的語音氣泡
下一篇：Javascript影片故障