CSS和自动换行

Question

我正在尝试在我的网站上制作“进度痕迹”。我的CSS体验大多数是关于其他人的货物，所以我不确定这里发生了什么。

更新：在此处填写：http://jsfiddle.net/Z4reM/5/

我的CSS看起来像：

div.progtrckr-table {
    width: 100%;
    display: table;
    table-layout: fixed;
    margin-bottom: 20px;
}
div.progtrckr-table div {
    display: table-cell;
    width: 2%;
    text-align: center;
    padding-bottom: 0.5em;
    vertical-align: bottom;
}
div.progtrckr-table div.progtrckr-done,
div.progtrckr-table div.progtrckr-doing {
    color: black;
    border-bottom: 4px solid yellowgreen;
}
div.progtrckr-table div.progtrckr-todo {
    color: silver; 
    border-bottom: 4px solid silver;
}
div.progtrckr-table div:after {
    content: "\00a0\00a0";
}
div.progtrckr-table div:after {
    position: relative;
    float: left;
    left: 50%;
    bottom: -1.7em;
    line-height: 1.2em;
}
div.progtrckr-table div.progtrckr-done:after {
    content: "\2713";
    color: white;
    background-color: yellowgreen;
    height: 1.2em;
    width: 1.2em;
    border: none;
    border-radius: 1.2em;
}
div.progtrckr-table div.progtrckr-doing:after {
    content: "\039F";
    color: yellowgreen;
    background-color: white;
    font-size: 1.5em;
    bottom: -1.1em;
}
div.progtrckr-table div.progtrckr-todo:after {
    content: "\039F";
    color: silver;
    background-color: white;
    font-size: 1.5em;
    bottom: -1.1em;
}

我的html看起来像：

<div class="progtrckr-table"> 
  <div class="progtrckr-done">Pickup/Delivery Options</div>
  <div class="progtrckr-done">Check Availability</div>
  <div class="progtrckr-doing">Reserve Boards</div>
  <div class="progtrckr-todo">Checkout</div>
</div>

在一个漂亮的宽屏幕上，它看起来很棒： 将屏幕缩小到其中一个文本想要换行之前，它开始看错了（点不对齐）： 更多的像素更窄，所以“拾取/交付选项”单词包装，它开始再次看起来很好：

关于出现问题的唯一线索是，当我在Chrome的开发者工具中选择四个div时，事先告诉我在非排队期间div是85x48,84x48,84x48,84x48阶段，他们是84x62.797,84x63,84x63,84x63，当他们排队时，所有四个都是相同的大小。如果我将其缩小到其他div之一与点不匹配的点，则div的大小是具有小数而不是整数的大小。

有人可以告诉我出了什么问题吗？