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

Question

我创建了带有选项卡的菜单，并在使用<button>s 的选项卡下创建了菜单。通常<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;
           };​