1

タブ付きのメニューと、使用するタブ<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>
4

2 に答える 2

0

追加してみてください

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

あなたのtdに。

于 2012-04-05T12:36:07.727 に答える
0

http://jsfiddle.net/F9aQw/

       .altbutton:hover {
           border:2px solid red;
           };​
于 2012-04-05T12:39:31.203 に答える