1

HTML

<div id="box-1">
  <div class="sub-box"></div>
  <div class="sub-box"></div>
  <div class="sub-box"></div>
  <div class="sub-box"></div>
  <div class="sub-box"></div>
</div>
<div id="box-2">
  <div class="sub-box"></div>
</div>

CSS

#box-1 {
  width: 500px;
  height: 100px;
  overflow: auto;
  background: black;
}
#box-2 {
  width: 500px;
  height: 100px;
  background: red;
}
.sub-box {
  width: 20%;
  height: 30px;
  border-right: 5px solid #FFF;
}

http://codepen.io/Calum/pen/IEbKj

两个子框的边界不匹配。我不想给两个子框滚动条。我不想将 20% 更改为像素值。

我怎样才能让边界对齐？为什么会这样？

4

3 回答 3

2

滚动条是由浏览器生成的，根据我的经验，每个浏览器都以自己独特的方式绘制它们……使这个像素完美的唯一方法是删除浏览器生成的滚动条并用插件中的自定义滚动条替换它们。 ..（如果您进行谷歌搜索，有几个选项）

一个例子： http: //manos.malihu.gr/jquery-custom-content-scroller/

这样您就可以专门调整 div 和滚动条的大小和位置，以获得最佳的跨浏览器体验

于 2013-11-06T21:16:50.763 回答
1

边框不对齐，因为滚动条从#box-1. 20%of 500px-<scrollbar>使框 1 的宽度稍小一些，从而将边框放置在几个像素上。

如果你想滚动，你将无法使用%你的宽度。

于 2013-11-06T21:14:10.313 回答
0

尝试删除溢出：自动；来自#box-1

于 2013-11-06T21:14:39.907 回答