找到拉伸网页的元素？

发布于 2024-12-13 06:37:09 字数 986 浏览 0 评论 0原文

我正在为 http://digitaleditor.com/ 做一些工作，但遇到了一些令人困惑的事情。

该网页底部有一个水平滚动条，但我一直无法弄清楚为什么。使用 Google Chrome 的开发者工具，我发现整个页面上只有 3 个项目宽度超过 960 像素。前两个是 html 和 body，第二个是 #hpages，但第二个只有 970 像素宽（html 和 body 的宽度均为 1263 像素）。此外，有一个非常明显的 CSS 规则将 #hpages 拉伸到 970 像素：

#hpages ul {   width:970px; float:right; }

我找不到这样的规则拉伸 html 或 body 元素。我尝试运行以下脚本来查看是否有任何我只是忽略的元素可能会拉伸页面：

javascript:widest=null;$("body *").each(function(){if(widest==null)widest=this;else if($(this).width()>$(widest).width())widest=this;});alert(widest.id);

这返回了#hpages，这意味着正文中没有任何项目的宽度超过 970 像素（即使尽管主体被拉伸到 1263 像素）。

没有 CSS 规则影响 body 元素的宽度或 html 元素的宽度。

老实说，我不知道是什么在拉伸页面，而且我不知道如何弄清楚。此时，我的最后手段是系统地从页面中删除项目，直到问题得到解决。我想知道是否有人知道更好的选择。

原文

I'm doing some work for http://digitaleditor.com/ and I've run into something a tad confusing.

The web page has a horizontal scroll bar at the bottom, but I've been unable to figure out why. Using Google Chrome's developer's tools I've found that there are only 3 items on the entire page that exceed 960 pixels wide. The first two are html and body, the second is #hpages, however the second is only 970 pixels wide (html and body are each 1263 pixels wide). Furthermore there's a very obvious CSS rule stretching #hpages to 970 pixels:

#hpages ul {   width:970px; float:right; }

I can find no such rule stretching the html or body elements. I tried running the following script to see if there were any elements I was simply overlooking that might be stretching the page:

javascript:widest=null;$("body *").each(function(){if(widest==null)widest=this;else if($(this).width()>$(widest).width())widest=this;});alert(widest.id);

This returned #hpages, meaning that no item is over 970 pixels wide in the body (even though the body is stretched to 1263 pixels).

There are no CSS rules affecting the width of the body element or the width of the html element.

I'm honestly just at a loss as to what is stretching the page, and I don't know how to figure out. At this point my last resort is systematically removing items from the page until it's resolved. I was wondering if anyone knew a better option.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

老旧海报 2024-12-20 06:37:09

它是 .wrapper>#page>#content>#sidebar.rightSidebar.left>center>div>#fb-root>div>div>iframe#f1c73bf2defcb8 中 iframe 的宽度，

它有一个内联width: 575px; 的样式溢出了。固定宽度或将 overflow: hide; 添加到此 div

< /代码>

回复收藏 0 原文

与之呼应 2024-12-20 06:37:09

在该页面中，您有一个链接到：

<link rel="stylesheet" href="http://digitaleditor.com/wp-content/themes/couponpress/template_couponpress/styles.css" type="text/css" media="screen" />

在该页面中有：

/* ===================== _HEADER STYLES ======================== */ 
#hpages ul {   width:970px; float:right; }
#hpages ul li { float: right; padding-right: 10px; margin-right: 10px; border-right: 1px solid #333; }

不确定，但也许 li 上的 margin-right 可能会导致它们溢出。您可能想在页面上使用 CSS 覆盖此样式。不确定您是否有权这样做，但这可能是一种选择。

In the page you have a link to:

<link rel="stylesheet" href="http://digitaleditor.com/wp-content/themes/couponpress/template_couponpress/styles.css" type="text/css" media="screen" />

In that page there is:

/* ===================== _HEADER STYLES ======================== */ 
#hpages ul {   width:970px; float:right; }
#hpages ul li { float: right; padding-right: 10px; margin-right: 10px; border-right: 1px solid #333; }

Not sure, but maybe having the margin-right on the li may be causing them to overflow. You may want to overwrite this style with CSS on your page. Not sure if you have access to do so, but that may be an option.

回复收藏 0 原文