0

ホバー時に表示される独自の小さなアイコンを持つナビゲーション メニューをそれぞれ作成しましたが、それらの垂直方向の配置は Safari と Firefox でかなり異なります。この問題にどのように取り組むことができるか考えていますか?

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="about_DELETE.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700' rel='stylesheet' type='text/css'>
</head>

<body>
<div id="navbar">

<div id="logo"></div>
<div class="navbordertop"></div>
<ul>
<span class="menuico"><li><a href="#">Menu</a></li></span>
<span class="menuico2"><li><a href="#">Menu2</a></li></span>
<span class="menuico3"><li><a href="#">Menu3</a></li></span>
<span class="menuico4"><li><a href="#">Menu4</a></li></span>
<span class="menuico5"><li><a href="#">Menu5</a></li></span>
<span class="menuico6"><li><a href="#">Menu6</a></li></span>
<span class="menuico7"><li><a href="#">Menu7</a></li></span>
<span class="menuico8"><li><a href="#">Menu8</a></li></span>
</ul>
</div>
<div id="container"></div>
</body>
</html>

CSS

body {
    margin: 0;
}
html { 
    background: url("images/site-bg.jpg") repeat scroll 0 50px transparent;
    position: relative;
}
#navbar {
    border-bottom: 1px solid #56831b;
    background-color: #8898a2;
    clear: both;
    float: left;
    height: 80px;
    margin: 0 auto 6px;
    width: 100%;
    z-index: 99999;
    position: absolute;
    top: 0;
    margin-bottom: 80px;
}
#navbar a {
    text-decoration: none;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 15px;
    color: #ebfedb;
    text-transform: uppercase;
    padding: 11px 0 8px 0;
}
#navbar ul {
    float: right;
    list-style-type:none;
    line-height: 3.333em;
    text-decoration: none;
    display: block;
    margin-right: 95px;
    margin-top: 35px;   
}
#navbar li {
    display:inline;
    padding: 15px 15px 9px 20px;
    }
.menuico li:hover {
    background: url(images/home.png) no-repeat 0 13px;
}
.menuico2 li:hover {
    background: url(images/home.png) no-repeat 0 13px;
}
.menuico3 li:hover {
    background: url(images/home.png) no-repeat 0 13px;
}
.menuico4 li:hover {
    background: url(images/home.png) no-repeat 0 13px;
}
.menuico5 li:hover {
    background: url(images/home.png) no-repeat 0 13px;
}
.menuico6 li:hover {
    background: url(images/home.png) no-repeat 0 13px;
}
.menuico7 li:hover {
    background: url(images/home.png) no-repeat 0 13px;
}
.menuico8 li:hover {
    background: url(images/home.png) no-repeat 0 13px;
}
#container {
    margin: 80px auto -40px;
    position: relative;
    width: 100%;
    overflow: hidden; 
}
4

1 に答える 1