你如何解决这个Chrome按钮边框错误？

Question

任何人都知道如何解决这个问题？我正在做一些自定义按钮样式。它在Firefox中看起来很好：

但在Chrome 15.0.874.106中看起来并不正确：

顶部边框在按钮中央有一些暗像素。它们仅在按钮达到至少一定宽度时显示。

这是CSS：

.mybutton, .mybutton:visited {
  display: inline-block;
  padding: 5px 10px 6px;
  color: #fff;
  text-decoration: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  position: relative; 
  cursor: pointer;
  font-size: 13px; 
  font-weight: bold; 
  line-height: 1; 
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  background-color: #ccc;
}

.mybutton:active { 
  top: 1px; 
}
.mybutton:hover { 
  background-color: #aaa; 
  color: #fff; 
}

我已经搜索过这个问题的其他提及，但到目前为止还没有找到任何东西。其他人之前遇到过这种情况吗？

Answer 1

似乎是这个

border-bottom: 1px solid rgba(0,0,0,0.25);

导致问题。

当我删除它时，一切都很好......即使按钮中有很多单词。

示例： http://jsfiddle.net/kW3u4/2/

在Windows上的Chrome 15.0.874.106上进行了测试