铬中的字间距和负边距

Question

我有三个百分比宽度的列，我使用字间距，填充和负边距，以便在两者之间放置带有装订线的列。当我使用text-align属性时，右边的值和中心chrome和firefox渲染列的位置非常不同。

代码如下：

body {
  width: 800px;
  margin: 0 auto;
}

.container {
  box-sizing: border-box;
  background-color: black;
  font-size: 0;
  height: 500px;
  word-spacing: 36px;
  padding-right: 24px;
  text-align: right;
}

.item-1, .item-2, .item-3 {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  height: 200px;
  margin-right: -24px;
  font-size: 16px;
  text-align: left;
}

.item-1{
  background-color: red;
  width: 20%;
}

.item-2 {
  background-color: green;
  width: 40%;
}

.item-3 {
  background-color: yellow;
  width: 20%;
}

使用以下html：

<div class="container">
  <div class="item-1">A</div>
  <div class="item-2">B</div>
  <div class="item-3">C</div>
</div>

你可以看到一个fiddle live version here.在示例中，文本对齐设置为正确firefox做我所期望的但是chrome将部分列放出容器盒，有什么方法可以解决这个问题吗？或者只是没有解决方案的边缘情况？