边框在IE的按钮之外，但不在FF，Chrome，Safari中

Question

我创建了带有标签的菜单，在我使用<button>的标签下。通常<button>具有border:none;属性。当用户悬停<button>时，会将以下课程添加到其中。

    .hover {
           border-style:solid
           border-width:2px;
           border-color:rgb(160,36,67);
           };

在此处可以看到未覆盖（右侧）<button>并悬停<button>。 （抱歉质量很差）

我得到了第一个结果firefox，safari和chrome。但是在IE边框中出现按钮并推送页面中的其他元素。我尝试使用max-height max-width，但结果是一样的。

我搜索但找不到类似的话题。谢谢你的帮助。

编辑：添加了HTML

    <table id="ust3tab" class="tab" border="0" cellpadding="0"      cellspacing="0">  
      <tbody>
        <tr>
        <td class="td1"><button id="alt1" class="altbutton">TAB1</button></td>
        <td class="td1"><button id="alt2" class="altbutton">TAB2</button></td>
        <td class="td1"><button id="alt3" class="altbutton">TAB3</button></td>
        <td class="td1"><button id="alt4" class="altbutton">TAB4</button></td>
        <td class="td1"><button id="alt5" class="altbutton">TAB5</button></td>
        </tr>
      </tbody>
    </table>

Answer 1

尝试添加

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

到你的td。

Answer 2

http://jsfiddle.net/F9aQw/

       .altbutton:hover {
           border:2px solid red;
           };​