浏览器缩放更改时裁剪的内容答案

【问题标题】：Content cropped when browser's zoom changes浏览器缩放更改时裁剪的内容
【发布时间】：2015-07-09 02:47:52
【问题描述】：

当我缩小 Chrome 时，我的网站内容会被裁剪掉。这是我的意思的屏幕截图。

我找不到解决办法。有吗？我阅读了有关将尺寸更改为 em 的信息并尝试过，但这并没有解决问题。希望有人能帮忙。

【问题讨论】：

请发布您的 html/css 代码。
这将是太多的代码，因为我真的不知道问题来自哪里，我的意思是哪个元素。这是我正在谈论的链接wardrobeicons.com/the-icons-update/…。在 Firefox 中缩小时看起来不错，但在 Chrome 中却不行。谢谢

【解决方案1】：

我认为正是这部分导致了作物。

#content.weekly-update #magazine {
  border: 1px solid #ccc;
  height: 580px;
  overflow: hidden;
}

作为一种快速解决方法，您可以将height 的值也增加600px 或更多。

或者放弃浮动布局，例如改用 CSS 表格布局 - 它具有单元格等高的最大特点之一。

【讨论】：

感谢您的回复。删除“溢出：自动”不起作用。我将如何删除浮动布局？是不是意味着把当前的浮动结构改成css表结构？
是的，这种情况下推荐使用css表结构，因为您希望左右列具有相同的高度。
这需要相当长的时间，因为有 16 个页面模板...我将暂时将高度更改为 600 像素，并将您的答案标记为正确的。感谢您的帮助 Pangloss
我还注意到大图像设置为#trends .trend的背景，并且需要设置高度。同样，css table 或 flex 布局将是一个适当的修复，否则你可以使用 javascripts。