我开发这个网站已经有一段时间了,今天突然我注意到浏览器上的水平滚动条正在显示,并且允许网站向右滚动几英寸,所有这些都仅由空白组成。
它在几个页面上执行此操作,但不是全部。
这是我遇到问题的页面 - http://www.princewebdesigns。 com/staging/gallais/our-firm.html
这是一个我没有遇到问题的页面 - http://www.princewebdesigns.com/staging/gallais/index.html
我尝试过在 FireBug 中进行调试,但找不到任何导致页面出现错误的 div 或元素更宽。这可能与浮动有关吗?这似乎是所有浏览器中的一个问题。
任何帮助将不胜感激。
PS - 我知道导航链接不起作用,这是因为我暂时将该网站存放在我的网络服务器的暂存目录中。
I've been developing this site for a while and suddenly today I noticed that the horizontal scrollbar on my browser was showing and was allowing the site to be scrolled a few inches to the right, all of which consists solely of whitespace.
It's doing this on several pages, but not all.
Here is a page on which I have the issue - http://www.princewebdesigns.com/staging/gallais/our-firm.html
Here is a page on which I do not have the issue - http://www.princewebdesigns.com/staging/gallais/index.html
I've tried debugging in FireBug but I can't find any divs or elements that are causing the page to be wider. Is it possibly related to a float? It appears to be an issue in all browsers.
Any help would be appreciated.
PS - I know the nav links are not functioning, it's because I'm temporarily housing the site in my web server's staging directory.
发布评论
评论(2)
css 类
.bluebar h1
有一个属性width: 70em;
em 不应用于定义元素的宽度。您的浏览器将 h1 计算为 28 像素的字体大小,这使得 .bluebar 的宽度为 28 x 70 = 1960 像素。有关 em 和其他 css 单元的正确解释,请参阅 w3schools
Firebug 和 Dragonfly 都允许您悬停页面。这是 Dragonfly 中的默认行为。在 Firebug 中,您可以通过单击 Firebug 窗口左上角的箭头按钮来打开它。这样你就可以很快地找到元素。
css class
.bluebar h1
has a propertywidth: 70em;
em should not be used to define width of elements. Your browser calculates the h1 to a font-size of 28px, which makes the .bluebar 28 x 70 = 1960px wide. For a proper explenation on em and other css units, see w3schools
Both Firebug and Dragonfly allow you to hover the page. This is default behaviour in Dragonfly . In Firebug you can turn it on by clicking the arrow button on the top left of the firebug window. This way you can find the elements quite fast.
问题是这样的:
如果你将其更改为
那么它就可以正常工作(但显然你现在有了背景图形。经过进一步检查,我发现了这一点。 ..哦等等...没有必要在这里重复答案!
编辑:好的,我花了太长时间回答这个问题 - 哈哈!
The problem is this bit:
If you change that to be
<div class="banner">
then it works okay (but obviously you now have the background graphics. On further inspection I see that... oh hang on... no point in duplicating the answer here!EDIT: Okay, I took too long answering this - lol! Give Benjamin the answer credit.