1

I have a web app(ASP.NET 2.0 C#). On my Masterpage, I have a menu control, and I am using a css stylesheet to style the different parts of the menu. For some reason, when I hover over the menu, it jumps a little. I think somehow the borders become larger when I hover over it.

Heres the styling for the whole menu:

.menu
{
    width:110%;
    height:25px;
    border: 1px solid gray;
    text-align:center;
}

Heres my style for the StaticHoverStyle:

.staticMenuHover
{
    background-color:#CCCCCC;
    border-style:solid;
    border-color:#888888;  
    text-decoration: underline;
    border-width:thin;
}

I don't know why this is happening, can someone help?

Thanks

4

3 に答える 3

1

ホバークラスの境界線の幅は細く設定されています。これは、私のテストでは2ピクセルの境界線としてレンダリングされています。1pxに設定します。

border-width:1px;

また、次のように、その2番目のクラスの境界ルールを1行に折りたたんで、最初のクラスと一致させることもできます。

border:1px solid #888888;
于 2009-04-23T14:19:34.697 に答える
0

あなたがあなたのテキストに下線を引いているので、それは起こっています。テキスト装飾なしで試してみてください、そして私はそれがあなたの問題を解決するに違いありません。

于 2009-04-23T14:16:27.293 に答える
0

リンクに (テキスト装飾ではなく) 下線をいつでも追加して、パディングを調整することができます。作業例:

#menu ul li a {
    display: block;
    width: 95%;
    padding: 0px 2px 2px 4px;
    text-decoration: none;
    color: rgb(30%,30%,60%); background: transparent;
}
#menu ul li a:visited {
    color: rgb(50%,10%,100%); 
}
#menu ul li a:hover {
    color: #000;
    border-bottom: 2px solid #c63; 
    background: #fcf;
    padding-bottom: 0px; }

これが機能するのは、2px の下部パディングを 0 px に変更し、同じルールに 2px の border-bottom を追加することです。色の変化は当面の問題と無関係です。

于 2009-04-23T16:43:29.567 に答える