Question

当我使用Windows 7在Chrome上查看此网站http://alchuang.com/mamaclub/时，我在页面上看到一个水平滚动条。似乎有一个额外的边缘导致这个，但通过检查元素扫描CSS，我似乎无法找到原因。可能是旋转木马的jQuery吗？

可以通过在overflow: hidden标记上应用<body>来更正它，但我更愿意找出原因并予以纠正。

非常感谢您的帮助！谢谢！

Answer 1

这个100％宽度，绝对定位的div导致它：

<div style="position:absolute;width:100%;height: 500px;/* background-color:black */background: -moz-linear-gradient(-45deg,  rgba(0,0,0,1) 2%, rgba(0,0,0,1) 44%, rgba(0,0,0,0) 100%); /* FF3.6+ */  background: -webkit-gradient(linear, left top, right bottom, color-stop(2%,rgba(0,0,0,1)), color-stop(44%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */  background: -webkit-linear-gradient(-45deg,  rgba(0,0,0,1) 2%,rgba(0,0,0,1) 44%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */  background: -o-linear-gradient(-45deg,  rgba(0,0,0,1) 2%,rgba(0,0,0,1) 44%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */  background: -ms-linear-gradient(-45deg,  rgba(0,0,0,1) 2%,rgba(0,0,0,1) 44%,rgba(0,0,0,0) 100%); /* IE10+ */  background: linear-gradient(135deg,  rgba(0,0,0,1) 2%,rgba(0,0,0,1) 44%,rgba(0,0,0,0) 100%); /* W3C */  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */;"></div>

这种情况正在发生，因为100％的宽度被计算到更大的身体（旋转木马）。

将position: relative添加到容器营销中以相对于容器而不是正文计算宽度。

Answer 2

我做了这些改动，它对我有用：

在<div class="container">上，我将宽度设置为100％而不是固定像素数。

在<div class="collapse navbar-collapse">（标题）上

，将margin-left设置为200px 和margin-right到200px

当然它与以前不完全相同，因为你应该将200px更改为正确的

滚动条消失的方式

编辑：但不知何故，内容在底部延伸了一点

Answer 3

我怀疑这是由不匹配的元素（即没有匹配的关闭标记的开放标记）引起的。这是一种常见的症状，虽然几乎不可能通过浏览器检测到，因为大多数现代浏览器都会自动修复此问题。

[编辑] 只是仔细看看你的LESS，看起来你已经解决了以下问题。我会把它留在这里以防万一其他人访问该页面寻找类似的解决方案。

~~同时，请确保您有~~

* { box-sizing: border-box; } html, body { margin: 0; }
你的CSS中

〜;这样可以确保所有内容都只有width所说的宽度（边框/填充不会扩大元素），并且主体和HTML本身没有外部边距（通常有一些内置边缘）在浏览器的保证金中。）

防止页面上的溢出水平滚动

3 个答案: