我的 HTML/CSS/javascript 中的什么会导致屏幕右侧出现奇怪的间隙？答案

【问题标题】：What in my HTML/CSS/javascript would be causing a strange gap on the right side of the screen?我的 HTML/CSS/javascript 中的什么会导致屏幕右侧出现奇怪的间隙？
【发布时间】：2010-02-24 11:55:35
【问题描述】：

我目前正在开发中，但遇到了屏幕右侧出现间隙的问题。

即使通常不需要水平滚动条，也有一个水平滚动条，当您向右滚动大约 10-15 像素时，站点右侧会出现一个间隙。我一直在做 HTML/CSS 开发，但我从来没有注意到这一点。有没有人知道什么可以做到这一点？

用代码回答：

HTML 包含一个名为“front_content”的 div，它位于我首页的下半部分，从左到右填充了整个窗口。我在该 div 上应用了 CSS3 阴影，使其在其上方的标题 div 上产生阴影，就好像它漂浮在上方一样。

.front_content {
    -moz-box-shadow: rgba(0,0,0,0.4) 0px -5px 10px;
}

有人向我指出，这导致页面比通常情况下更宽。通过移除那个 CSS3 阴影，差距就消失了。

【问题讨论】：

在 chrome 或 IE7 中似乎没有这样做。除非我错过了什么。
在此处包含您的一些 html，而不仅仅是一个链接。

标签： jquery html css layout

【解决方案1】：

这是罪魁祸首（这也解释了 Zack 看不到它的原因），阴影使物体比你预期的要宽：

.front_content {
-moz-box-shadow:0 -5px 10px rgba(0, 0, 0, 0.4);

【讨论】：

.front_content 正是这样做的。从 DOM 中删除它可以确认这一点。不需要将阴影应用于该元素，因为您希望它是视口宽度的 100%。

【解决方案2】：

尝试将overflow: hidden 添加到您的“主要内容”div。然后，您可能希望让“立即申请”按钮更加浮动。

【讨论】：

【解决方案3】：

看起来您的媒体菜单 div 对于屏幕来说太宽了。

【讨论】：