javascript - 如何在流体宽度轮播中的页面之间创建间距？

Question

我正在为我当前的元素创建自定义轮播。这是一个简化版本(仅在 Chrome/Mac 中测试过):

http://codepen.io/troywarr/pen/LpQzbv

请注意，当轮播滚动时，您可以看到每个页面 (1-5) 的左右两侧都与相邻页面齐平(看起来像一个双倍粗的边框)。我想在每个页面的左右边框之间添加一个 5 像素宽的间距，这样边框就不会接触。

但是，由于这是一个流体宽度的轮播，事实证明这比预期的要困难。

我需要支持IE9+，所以不能依赖calc()值或 CSS animations ;我可能需要通过 jQuery .animate() 来做到这一点，但是当我设置动画的水平位置基本上是 100% + 5px 时，我不知道如何在代码中表达它。

我该怎么做？是否有另一种聪明的方法来设置轮播，让我可以使用边距、填充、表格单元格填充等来对我有利？或者，还有其他想法吗？我已经尝试了几个小时的不同方法，但我的想法已经用完了。

---

更新:

只是为了澄清我所说的“装订线”的意思 - 我希望轮播中每个页面的左右两侧之间有一个 5px 的空隙。每个页面都应该保留自己的边框，但它们之间应该有空白(只有在滚动时才会注意到)。下面是一个使用 calc() 和 CSS 转换来执行我想要的操作的示例(仅在 Chrome 中测试过):

http://codepen.io/troywarr/pen/GpQYPj

我只需要找到一个与 IE9+ 兼容的类似解决方案(calc() 和 CSS 动画不兼容)。

Answer 1

将 border-box 应用于所有内容将允许您在不破坏布局的情况下添加填充。

// See an explanation here:
// http://www.paulirish.com/2012/box-sizing-border-box-ftw/
html {
   box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

编辑:

抱歉，您已经这样做了。这是我的看法:

.window {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
    // Add these two rules
    // The idea is to make a static frame, except for the right column
    // which is the one being repainted.
    border: 5px solid #666;
    border-right: 0;
}

...

.slider li {
    float: left;
    width: 20%;
    height: 100%;
    background-color: #ccc;
    display: table;
    border-right: 5px solid #666; // <- Paint the right column only
 }