當我放大時，邊框消失在Chrome中

Question

我有這個非常簡單的形式：http://jsfiddle.net/TKb6M/91/。有時，當我使用Chrome放大或縮小時，輸入邊框會消失。例如，當我放大到90％，我得到：

當然，您的里程可能會有所不同。

如果您想知道這些<span>標籤，我按照How do I make an input element occupy all remaining horizontal space?的建議添加了它們。

我的CSS有沒有問題，或者這是一個Chrome的錯誤？它似乎在Firefox上正常工作。我能做些什麼來避免這種行爲？

謝謝。

Answer 1

您正在強制Chrome進行子像素計算，並且這通常具有奇怪的行爲。

如果您將輸入高度更改爲30像素，則90％縮放可以正常工作（因爲這是27像素），但75％的縮放不會（因爲這是22.50像素）。

您也可以通過給邊框設置3px的寬度來避免這種情況。在這種情況下，您會看到不同地方的邊框寬度不同。

無論如何，最好的解決方案是在輸入周圍留出更多的空間，這樣即使邊界處於亞像素位置，也可以清晰地繪製邊框。

Answer 2

這是因爲你設置了一個固定的高度，並且當縮放輸入的長度大於該高度時，使邊框消失。使用線高度和填充以獲得所需的高度，而不是 - 見updated Fiddle

更新：忽略什麼，我說，那是因爲你對你的跨度設定overflow:hidden，除去應該做的伎倆。可能會導致需要改變輸入寬度。

在附註上;你正在使你的跨度成爲一個很好的工程，但它看起來有點不好。如果可能的話，嘗試使用塊元素，而不是將內聯元素更改爲塊。

Answer 3

如果溢出：隱藏是必需的，請提及overflow：隱藏僅適用於您面對寬度問題的瀏覽器。在其他瀏覽器中，metion顯示：flex，以便自動採用寬度正確的方式，以便放大/縮小邊框不會消失。

例如： 寬度是不是在我的情況下，只有IE瀏覽器是正確的，所以我提到：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
.spanStyles { 
display: block; 
overflow: hidden; 
} 
} 

和輸入/輸出問題變焦在Firefox和Chrome是存在的，所以我提到

.spanStyles { 
display : flex; 
} 

這解決了我在所有瀏覽器中遇到的問題。