Question

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

网页底部有一个水平滚动条，但我一直无法找出原因。使用谷歌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像素）。

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

老实说，对于拉伸页面的内容感到遗憾，我不知道如何弄明白。在这一点上，我最后的办法是系统地从页面中删除项目，直到它被解决。我想知道是否有人知道更好的选择。

Answer 1

这是.wrapper>#page>#content>#sidebar.rightSidebar.left>center>div>#fb-root>div>div>iframe#f1c73bf2defcb8

中iframe的宽度

它的内联样式width: 575px;溢出。修复宽度或将overflow: hidden;添加到此div <div style="position: absolute; top: -10000px; height: 0px; width: 0px;">

Answer 2

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

<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上有右边距可能导致它们溢出。您可能希望在页面上使用CSS覆盖此样式。不确定您是否有权这样做，但这可能是一种选择。

Answer 3

从position:relative;

中删除.wrapper

查找拉伸网页的元素？

3 个答案: