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

我创建了带有标签的菜单，并在标签下使用<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>

---

尝试添加

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

到你的td。

---

http://jsfiddle.net/F9aQw/

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

链接地址: http://www.djcxy.com/p/40507.html

上一篇: Border is outside the button in IE but not in FF, Chrome, Safari

下一篇: IE8 moves content on mouseover