缩小时定位被破坏答案

【问题标题】：Positioning being broken when zoomed out缩小时定位被破坏
【发布时间】：2014-07-09 19:24:00
【问题描述】：

最近我们有一些客户抱怨我们的网站定位被弄乱了，我们后来发现只有当他们的浏览器缩小到 75% 左右时才会出现这个问题。我们的大多数客户都没有意识到他们的浏览器被设置为缩小模式，我们被告知要解决这个问题，以便无论缩放级别如何，定位都是一致的。

我尝试使用em 调整元素大小，也尝试使用%，但定位仍然混乱。

所有页面都出现此问题 - 页面右上角的“需要帮助”框在 75% 缩放时脱落，产品页面上的主框在 75% 缩放时不适合容器。

谁能给我一些建议？我正在寻找某种 CSS 媒体查询，它可以让我更改特定缩放级别的 CSS 规则。

谢谢！

【问题讨论】：

标签： html css

【解决方案1】：

我设法通过修改元素的宽度以使用百分比而不是像素，并重新调整元素的间距来解决这个问题。我没有使用边距，而是放置了一个较小的内部容器并给它一个填充，这通常可以解决大多数问题。

【讨论】：

【解决方案2】：

这似乎主要影响您的 .product 元素，将它们的宽度从其当前设置 190.5px; 更改为 23%，以便它们按比例缩放。

.product {
   width: 23%;
}

这可能比其他任何事情都更快速解决，但应该解决位置问题，直到找到更永久的解决方案。

【讨论】：