如何在流体宽度旋转木马中的页面之间创建水槽？

Question

我为我当前的项目创建了一个自定义轮播。这是一个简化版本（仅在Chrome / Mac中测试）：

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

请注意，当轮播滚动时，您可以看到每个页面（1-5）与左侧和右侧的邻居齐平（看起来像一个双倍厚的边框）。我想在每个页面的左右边框之间添加一个5px宽的装订线，这样边框就不会碰到。

然而，由于这是一个流体宽度的转盘，事实证明这比预期的要困难。

我需要支持IE9 +，因此我无法依赖calc()值或CSS animations;我可能需要通过jQuery .animate()来做这件事，但是当我动画的水平位置基本上是100% + 5px时，我无法弄清楚如何表达在代码中。

我该怎么做？是否有另一种聪明的方法来设置旋转木马，允许我使用边距，填充，表格填充等等，以造福我？或者，还有其他想法吗？我用不同的方法玩了几个小时，而且我的想法已经用完了。

更新

只是澄清我的意思＆＃34; gutter＆＃34; - 我希望在旋转木马的每页左右两侧之间有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
 }