当我在Chrome浏览器中缩放页面时，边框消失了。

Question

我有一个非常简单的表格：http://jsfiddle.net/TKb6M/91/。有时，在 Chrome 中缩放时，输入框的边框消失了。例如，当我缩放到90％时，会出现以下情况：

当然，效果因人而异。

如果您想知道那些标签，那是我根据如何让输入元素占据所有剩余的水平空间？的建议添加的。

这是我的CSS有问题还是Chrome的bug？它在Firefox上似乎工作正常。我该怎么做才能避免这种行为？

谢谢。

- Luís Pureza

---

我曾经看到在缩放级别为90％时，1px的填充被移除。 它是在一个<table>元素上的填充规则。 - BairDev

我还注意到，如果你的边框样式是“double”，那么其中一条“double”线可能会消失。 - posfan12

Answer 1

我非常确定Luís Pureza已经解决了他的问题，但是我发现一种非常简单的方法来解决它，只需要更改这个：

如果你有一个像这样的表边框：

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

将其更改为这个：

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

我在这个链接中找到了解决方案: https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc

希望对你有所帮助。

- Víctor Campoy Marco

---

更好且更一致的解决方案。 - Will P.

这应该是现在被接受的答案。它的效果比我预期的要好。非常感谢。 - Hassan Ila

thin 不起作用！！！和 1px 没有区别！ - gene b.

我也没成功。 - sergioruizsan

Answer 2

你正在强制Chrome进行亚像素计算，这通常会导致奇怪的行为。

如果你将输入框的高度更改为30px，则90%缩放可以正常工作（因为这是27px），但是75%缩放不行（因为这是22.50px）。

你也可以通过给边框设置3px的宽度来避免这种情况。在这种情况下，你会发现边框的宽度在不同位置是不同的。

无论如何，最好的解决方案是在输入框周围留出更多的空间，这样即使处于亚像素位置，边框也能被清晰地绘制出来。

- vals

---

我有类似的问题，当缩放页面时，按钮右侧的边框消失了。在按钮周围添加内边距对我修复了边框。谢谢。 - GraafM

为什么它不直接四舍五入到最近的像素？ - ESR

嗨@ESR，我想要实现这个，但是在我的情况下，我有一个下拉菜单，其中有10个值，在第5个之后我使用了overflow：auto。在这种情况下，我不确定如何在底部提供更多的填充。在我的情况下，只有底部边框消失了。 - pramodpxi

Answer 3

我知道我来晚了，但是稍微作弊一下，将边框宽度设置为1.5像素似乎每次都能解决问题。

- David Morton

---

我的问题恰恰相反。当我缩小页面时，Bootstrap框的边框消失了。这个解决方案解决了这个问题。 - dapperdan1985

在我的情况下，1像素在Firefox上不会消失，但在Chrome上会消失。使用1.5像素时，Chrome的行为是正确的，但Firefox显示2像素宽度... - iFederx

在我的情况下，Chrome浏览器的边框在100%缩放时消失，在缩小或放大缩放时出现。 - traxium

无论您如何使用 border-width，都会将问题转移到表中的其他行。您给它的任何值都可能会在该行上修复它，但会在其他行上出现问题。我在我的主题中展示了这一点：https://stackoverflow.com/questions/71789886/chome-border-thickness-issue-on-zoomed-resolutions-border-width-px-does-not 不，1.5没有任何“神奇”的地方，它也不能完全解决问题。 - gene b.

Answer 4

我曾经遇到过一个问题：一个带边框的 div 包裹着一个没有边框的 input，这里的所有优秀答案都没能解决我的问题。

最终，我添加了以下代码：

overflow: auto; 

对于有问题的边框的 div 元素，进行操作就可以解决问题。

- Elad

Answer 5

这是因为您设置了固定的高度，当缩放输入时，输入框变得比该高度更大，导致边框消失。使用行高和填充来获得所需的高度 - 请参见更新后的Fiddle 更新：忽略我说的话，这是因为您在span上设置了overflow:hidden，去掉它就可以解决问题了。但可能需要改变输入框的宽度。

顺便说一下；将span变成块级元素是可以的，也能正常工作，但看起来有点不好。如果可能的话，请尝试使用块级元素，例如div，而不是将内联元素更改为块级元素。

- Henrik Janbell

---

谢谢，但问题似乎仍然存在。 - Luís Pureza

“overflow:hidden”这一部分是必须的，以允许输入框宽度最大达到“100%”，而我希望保持这一特性。 - Luís Pureza

对我来说，设置height: 32px使边框消失了。我通过在<select>元素上设置padding: 0.2rem来获得所需的高度。 - El Anonimo

Answer 6

我在2018年也遇到了Chrome类似的问题 - 输入框和文本域上面的边框消失了。解决方法是在CSS中简单地指定顶部边框。

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

我无法解释为什么需要这样做，只是在某些地方丢失了边框，但至少这是一个快速的解决方法。

- user2728841

Answer 7

如果需要使用overflow: hidden，请仅在遇到宽度问题的浏览器中提及overflow: hidden。在其他浏览器中，提及display: flex以便自动正确获取宽度，并且在缩放时边框不会消失。

例如： 在我的情况下，只有IE的宽度不正确，因此我提到了：

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

而且在Firefox和Chrome中都出现了缩放问题，所以我提到了这一点

.spanStyles {
 display : flex;
}

这个解决方案在所有浏览器中都解决了我的问题。

- Aarzoo Trehan

Answer 8

感谢您上面的所有答案，我遇到了边框问题，例如这个，当缩小时，边框显示会混乱。最终发现overflow: hidden对我有用。

export const InputWrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 56px;
  border-radius: 4px;
  border: 1px solid #707070;
  padding: 16px 0 16px 16px;
  overflow: hidden;

- Sijun