ホバーが移動するとナビゲータのサイズが変更されます

ここにウェブサイトのナビゲータバーがあります。私はそれがホバー上でサイズ変更される理由とそれを修正する（すなわち、サイズを変更しない）方法を疑問に思っています。今すぐナビゲータバーの項目にマウスを置くと、それが展開されます。ホバーが移動するとナビゲータのサイズが変更されます

は、ここに私のコードです：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    background-color: rgb(255, 255, 255); 
    opacity: 1.0; 
    list-style-type: none; 
    margin: 0; 
    overflow: hidden; 
    -moz-box-shadow: 0px 2px 20px -5px rgba(0, 0, 0,0.5); 
    -webkit-box-shadow: 0px 2px 20px -5px rgba(0, 0, 0, .5); 
    box-shadow: 0px 2px 20px -5px rgba(0, 0, 0, .5); 
    padding: 5px; 
} 
li { 
    float: right; 
} 
li a { 
    display: block; 
    color: black; 
    text-align: center; 
    padding: 14px 25px; 
    text-decoration: none; 
} 
li a:hover { 
    font-family: cursive; 
} 
a { 
    color: black; 
    text-decoration: none; 
} 
a:hover { 
    text-decoration: underline; 
} 
</style> 
</head> 

<body> 
<header id="header"> 
    <ul> 
     <li><a href="#experience">Experience</a></li> 
     <li><a href="#background">Background</a></li> 
     <li><a href="#home">Home</a></li> 
    </ul> 
</header>

出典

2016-04-28 ZigZagZebra

何が私のためにサイズを変更していない、問題を示すためにバイオリンを作る – theblindprophet

あなたはリンクのline-height設定していない、とあなたはあなたのホバーとフォントスタイルをスワップアウトしているので、それは、フォントのデフォルトの行の高さを使用しています。下の例では、リンクをline-height: 1;に設定しており、ジャンプが発生しなくなりました。

ul { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    background-color: rgb(255, 255, 255); 
 
    opacity: 1.0; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    overflow: hidden; 
 
    -moz-box-shadow: 0px 2px 20px -5px rgba(0, 0, 0,0.5); 
 
    -webkit-box-shadow: 0px 2px 20px -5px rgba(0, 0, 0, .5); 
 
    box-shadow: 0px 2px 20px -5px rgba(0, 0, 0, .5); 
 
    padding: 5px; 
 
} 
 
li { 
 
    float: right; 
 
} 
 
li a { 
 
    display: block; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 14px 25px; 
 
    text-decoration: none; 
 
    line-height: 1; 
 
} 
 
li a:hover { 
 
    font-family: cursive; 
 
} 
 
a { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 
a:hover { 
 
    text-decoration: underline; 
 
}

<header id="header"> 
 
    <ul> 
 
     <li><a href="#experience">Experience</a></li> 
 
     <li><a href="#background">Background</a></li> 
 
     <li><a href="#home">Home</a></li> 
 
    </ul> 
 
</header>

出典

2016-04-28 01:59:43 Hynes

それは動作します。ありがとう！ – ZigZagZebra

ホバーが移動するとナビゲータのサイズが変更されます

答えて

関連する問題