Question

我正在开发一个以1024 X 768为最低分辨率的网站。所以，我们的宽度约为970px。设计回归时有一个有趣的布局，其中一个网站的横幅实际上超过了这个宽度（确切地说是1288px），对于分辨率更高的用户来说看起来不错，但在1024处看起来很好。

因此，为了防止滚动条出现在1024的那些我绝对定位横幅并使用overflow-x：隐藏在主体上。这在我们的目标浏览器中运行良好。

现在，客户端已回来并要求800 X 600的用户使用滚动条（是的，这不是目标），因此他们可以看到关键的登录按钮。

如果没有做出根本改变，这些2％的用户如何能够满足这一要求？我能想到的只是检测它们的屏幕宽度并删除overflow-x：hidden。

当构建过程中的需求发生变化时，你必须要爱！

编辑 - 这里的内容对我来说似乎很简单 - 这里有什么警告吗？

if (screen.width < 1024) {
    $("body").css("overflow-x", "visible");
}

Answer 1

如何将横幅分为三个部分。

左侧超过800像素。
中心800像素。
超过800像素的右侧。

然后仅将overflow-x: hidden;设为1和3。

这样，如果中心800像素被切断，它们将获得一个滚动条。如果用户可以看到1100像素而不是整个横幅，则他们将无法获得滚动条。

Answer 2

我想说你的想法是检测屏幕宽度，然后删除overflow-x：hidden可能是最好的。使用一些javascript应该很简单。

Answer 3

这样的事情（try it）怎么样？最后一个选择器至少与IE 6的兼容性最小。当然你应该调整/降低我指定的最小宽度，以便它与你的布局一起工作。

html {
    margin: 0;
    overflow: auto;
    padding: 0;
}

body {
    margin: 0;
    min-width: 1024px;
    overflow-x: hidden;
    padding: 0;
}

* html body {
    width: 1024px;
}

Answer 4

您可以使用带有背景图片的<div>代替<img>：

<div style="background: url(/images/banner.jpg) no-repeat center top;"/>

<div>将为您处理裁剪，溢出和大小调整问题，您不需要一堆overflow黑客。

css绝对定位隐藏的滚动条......带有扭曲

4 个答案: