0
我在我的頁面頂部有一個導航欄，由嵌套的ul製作而成，它在mouseover上更改爲visibility。這個東西在firefox中工作並且看起來不錯，但是當我用chrome打開它時，我得到一個鋸齒狀的底邊，並且無法弄清楚原因。我使用normalize.css以及自定義圖標字體（ionicons），谷歌庫和jquery中的一種字體。由ul製成的導航欄在chrome中獲得鋸齒狀的邊緣
任何幫助或建議表示讚賞。下面的代碼段。
$(document).ready(function() {
\t $('#content').load('html/landing.html'); //loads landing.html
\t $('head').append('<link rel="stylesheet" href="css/landing.css" type="text/css" />'); //loads landing.css
\t //shows dropdown
\t function openSubMenu() {
\t \t $(this).find('ul').css('visibility', 'visible');
\t };
\t //closes dropdown
\t function closeSubMenu() {
\t \t $(this).find('ul').css('visibility', 'hidden');
\t };
\t $('#navbar > li').bind('mouseover', openSubMenu);
\t $('#navbar > li').bind('mouseout', closeSubMenu);
});/*************************************
GENERAL STYLE(fonts, bg...)
*************************************/
body {
\t font-family: 'Pt Sans', sans-serif;
\t font-size: 1.2em;
\t background-image: url('../images/mobile-bg.jpeg');
}
html {
\t min-width: 320px;
}
/*************************************
BANNER
*************************************/
.banner {
\t text-align: center;
\t margin: 1em 0;
}
.banner h1 {
\t margin: 0;
\t padding: 0;
\t font-weight: bold;
}
/*************************************
TOP MENU
*************************************/
#navbar {
\t margin: 0;
\t padding: 0;
\t background-color: #913D88;
\t text-align: center;
}
#navbar li {
\t list-style: none;
\t display: inline-block;
}
#navbar li a:link, #navbar li a:visited {
\t color: #fff;
\t display: block;
\t text-decoration: none;
\t background-color: #913D88;
\t padding: 0.5em 0.2em;
}
#navbar li a:hover {
\t color: #190b18;
}
#navbar li ul {
\t z-index: 10;
\t position: absolute;
\t visibility: hidden;
}
#navbar li ul li {
\t display: inline;
}
#storitve {
}
/*************************************
FOOTER
*************************************/
.footer {
\t background-color: #913D88;
\t color: #fff;
\t text-align: center;
}
.footer p {
\t padding: 0.5em 0.2em;
}
/*************************************
LANDSCAPE SMARTPHONE
*************************************/
@media screen and (min-width: 480px) {
\t body {
\t \t background-color: red;
\t \t background-image: url('');
\t }
\t #storitve {
\t }
}
/*************************************
TABLET
*************************************/
@media screen and (min-width: 640px) {
\t body {
\t \t background-color: green;
\t \t background-image: url('');
\t }
}
/*************************************
LAPTOP
*************************************/
@media screen and (min-width: 1280px) {
\t body {
\t \t background-color: blue;
\t \t background-image: url('');
\t }
}
/*************************************
DESKTOP
*************************************/
@media screen and (min-width: 1900px) {
\t body {
\t \t background-color: black;
\t \t background-image: url('');
\t }
}<!DOCTYPE html>
<html>
\t <head>
\t \t <meta charset="UTF-8">
\t \t <meta name="viewport" content="width=device-width, initial-scale=1">
\t \t <title>Domača stran znanstveno informacijskega centra</title>
\t \t <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
\t \t <link rel="stylesheet" href="css/normalize.css">
\t \t <link rel="stylesheet" href="css/ionicons.css">
\t \t <link rel="stylesheet" href="css/frame.css">
\t </head>
\t <body>
\t \t <div class="header">
\t \t \t <div class="banner">
\t \t \t \t <img src="images/ijs_logo.gif" alt="IJS logo">
\t \t \t \t <h1>ZNANSTVENO INFORMACIJSKI CENTER</h1>
\t \t \t </div>
\t \t \t <div class="myMenu2">
\t \t \t \t <ul id="navbar">
\t \t \t \t \t <li><a href="#">IJS</a></li>
\t \t \t \t \t <li><a href="#">knjižnica</a></li>
\t \t \t \t \t <li><a href="#">zaloga</a>
\t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t <li><a href="#">novi izvodi tiskanih revij</a></li>
\t \t \t \t \t \t \t <li><a href="#">elektronske revije</a></li>
\t \t \t \t \t \t \t <li><a href="#">katalog</a></li>
\t \t \t \t \t \t \t <li><a href="#">baze podatkov</a></li>
\t \t \t \t \t \t </ul>
\t \t \t \t \t </li>
\t \t \t \t \t <li><a href="#">storitve</a>
\t \t \t \t \t \t <ul id="storitve">
\t \t \t \t \t \t \t <li><a href="#">medknjižnična izposoja</a></li>
\t \t \t \t \t \t \t <li><a href="#">fotokopirnica</a></li>
\t \t \t \t \t \t </ul>
\t \t \t \t \t </li>
\t \t \t \t \t <li><a href="#">ENG</a></li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t </div>
\t \t <div id="content">
\t \t </div>
\t \t <div class="footer">
\t \t \t <p>© ZIC IJS. Vse pravice pridržane</p>
\t \t </div>
\t \t <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
\t \t <script src="js/index.js"></script>
\t </body>
</html>