クロスブラウザのパディング/マージン

Question

この問題を解決するヒントを教えてもらえますか？それが実際にどのように見えるかのデモ

li:hover { 
    background-color: #222222; 
    padding-top: 8px; 
    padding-bottom: 9px; 
} 

をそしてここにあります：次のように私は自分のサイト上のメインメニューがあり、そのためのコードがある

問題があるときにIメニューオプション（li）の上にマウスを置くと、背景が表示されますが、メニューの背景の外側にオーバーフローして、本当にかわいく見えるようになります。

（明らかに）これらのブラウザで正しく表示されるようにパディングを変更すると、IEの高さが小さすぎます。だから私はどちらかの方法でねじ込まれています。このような小さな不完全さをすべてのブラウザで同じようにする方法を教えてください。

更新：

HTML（メニュー）：

  <ul class="menu"> 
       <li class="currentPage" href="index.php"><a>Home</a></li> 
       <li><a href="services.php">Services</a></li> 
       <li><a href="support.php">Support</a></li> 
       <li><a href="contact.php">Contact Us</a></li> 
       <li><a href="myaccount/" class="myaccount">My Account</a></li> 
      </ul> 

CSS：

.menu { 
    margin-top: 5px; 
    margin-right: 5px; 
    width: 345px; 
    float: right; 
} 

li { 
    font-size: 9pt; 
    color: whitesmoke; 
    padding-left: 6px; 
    padding-right: 8px; 
    display: inline; 
    list-style: none; 
} 

li:hover { 
    background-color: #222222; 
    padding-top: 8px; 
    padding-bottom: 9px; 
} 

Answer 1

あなたがホバーに基づいてパディングを変更しないことで問題を防ぐかもしれません。さらに、あなたの上に置く必要があります

期待どおりに動作しますか？ JSFiddle example

Answer 2

あなたの問題はおそらくディスプレイの使用によるものです：インライン。 ulの明示的な高さを設定してみてください。あなたの例でこれを行うと、私の仕事：

ul { 
border-bottom: 2px solid black; 
height: 28px; 
} 

私は私がに揃えた場所を確認することができるように境界線を追加しました。

ところで、適切な解決策は、li：hoverを使用せず、a：hoverを使用することです。