镀铬的鬼魂空间

Question

任何人都可以解释为什么在非一对一的dpi（在IE中看起来很好）以及如何解决这个问题时，Chrome中此按钮的文本与右侧部分之间存在鬼魂空间？根据文本的宽度，空格出现在不同的位置：有时仅在文本之后，文本之前和之后的某个时间。

https://jsfiddle.net/y00jm5zk/

<span class="button">Button</span>

.button {
    display: table-cell;
    text-align: center;
    height: 24px;
    background-image: url(http://www.genesyx.ru/Images/btnleft.png), url(http://www.genesyx.ru/Images/btnright.png), url(http://www.genesyx.ru/Images/btnbg.png);
    background-size: 10px 24px, 11px 24px, 100% 24px;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: left, right, left;
    background-origin: border-box, border-box, padding-box;
    font-family: Verdana;
    font-size: 12px;
    color: white;
    border-width: 0 11px 0 10px;
    border-style: solid;
    border-color: transparent;
    vertical-align: middle;
    cursor: pointer;
}

我编辑的链接：http://prntscr.com/buamkx

提前致谢。