為什麼我的輸入框邊框在 Chrome 中縮放時消失？

Chrome 難以捉摸的邊框：對消失的輸入邊界進行故障排除

透過Chrome 存取簡單表單的使用者可能會遇到輸入元素邊框在縮放時消失的問題排或出。在 90% 縮放等級附近可以觀察到這種現象。這種行為的原因引發了爭論，有些人將其歸因於 CSS 問題，有些人則聲稱 Chrome 存在 bug。

問題的根源

問題的根本原因這種行為似乎在於瀏覽器的渲染引擎。當使用「thin」關鍵字指定邊框寬度時，Chrome 將其解釋為特定的像素值（通常約為 1px），在縮放操作期間會出現舍入錯誤。這可能會導致邊框厚度變為零，從而有效地隱藏元素的邊界。

簡單的解決方案

要解決此問題，建議進行簡單的 CSS 調整。使用特定像素值指定邊框寬度，而不是使用“thin”。例如，將 CSS 程式碼從：

INPUT, TEXTAREA {
  border-top: thin solid #aaa;
}

改為：

INPUT, TEXTAREA {
  border-top: 1px solid #aaa;
}

應該可以解決問題。透過明確定義邊框寬度，您可以規避 Chrome 的捨入誤差，並確保不同縮放等級下邊框可見性的一致性。

以上是為什麼我的輸入框邊框在 Chrome 中縮放時消失？的詳細內容。更多資訊請關注PHP中文網其他相關文章！