Question

我创建了一个使用|的CSS顶部栏菜单字符作为分隔符。它在我尝试用于Linux或Windows的任何浏览器上完全按照它的呈现方式进行渲染。但是，在Mac上，使用任何浏览器，|字符下拉一行左右，并在菜单栏下方呈现。

CSS

#menu {
position:relative;
width:80%;
min-width:800px;
margin-left:auto;
margin-right:auto;
margin-top:1%;
text-align:center;
border-top:1px solid #666666;
border-bottom:1px solid #666666;
padding: 12px 12px;
height:1.6em;
font-family: 'Geometria-Medium';
}
#menu ul {
display:inline-block;
margin: 0;
margin-left:auto;
margin-right:auto;
text-align:left;
padding: 0px;
line-height: 1.2em;
}

#menu li {
list-style:none;
}

#menu>ul>li {
float: left;
margin-right: 1px;
position:relative;

}

#menu>ul>li ul {
position:absolute;
}
#menu>ul>li ul>li {
bottom:0px;
display:none;
width:15em;
float:left;
}
#menu>ul>li:hover ul>li {
display:block
}
#menu a {
display:block;
padding: 0px 5%;
text-decoration: none;
text-transform: uppercase;
color:#666666;
line-height:2em;
}

#menu a:hover {
text-decoration: none;
cursor:pointer;
}
#menu .active {
}
#sub {   
background-color:#CC0000;
line-height:2em;
}
#sub a:hover {
background-color:#ff9999;
}

HTML

<div id="menu">
<ul class="nav">
<li class="navLi" style="vertical-align: top !important;"><a href="index.html">Home     <span style="vertical-align: top !important;">&nbsp;&nbsp;|</span></a></li>
<li class="navLi"><a href="about.html">About <span style="vertical-align: top !important;">&nbsp;&nbsp;|</span></a></li>
<li class="navLi"><a href="services.html">Services <span style="vertical-align: top !important;">&nbsp;&nbsp;|</span></a></li>
<li class="navLi"><a href="#">Portfolio <span style="vertical-align: top !important;">&nbsp;&nbsp;|</span></a>
<ul id="sub">
<li><a href="sparkle.html" style="color:#FFFFFF;line-height:2em;border-bottom:2px solid #ff9999;">The Sparkle Project</a></li>
<li><a href="jam.html" style="color:#FFFFFF;line-height:2em;border-bottom:2px solid #ff9999;">Jam In Jubilee</a></li>
<li><a href="connect.html" style="color:#FFFFFF;line-height:2em;border-bottom:2px solid #ff9999;">Connect Now Network</a></li>
<li><a href="ovi.html" style="color:#FFFFFF;line-height:2em;border-bottom:2px solid #ff9999;">Ovidiu Bistriceanu</a></li>
<li><a href="devon.html" style="color:#FFFFFF;line-height:2em;">The Devon Clifford Music Foundation</a></li>
</ul>
</li>
<li class="navLi"><a href="testimonials.html">Testimonials <span style="vertical-align: top !important;">&nbsp;&nbsp;|</span></a></li>
<li class="navLi"><a href="blog.html">Blog <span style="vertical-align: top !important;">&nbsp;&nbsp;|</span></a></li>
<li class="navLi"><a href="contact.html">Contact</a></li>
</ul>
</div>

非常感谢任何帮助。感谢

Answer 1

如果是我......

我把所有的css都放在一个css文件中，而不是内联。然后我将css用于视觉外观，如下所示。

#menu>ul>li{
    border-right: 1px solid #000;
    padding-right:20px;
    padding-left: 10px;
}
#menu>ul>li:last-child {
    border-right:none;
    padding: none;
}

...

<div id="menu">
    <ul class="nav">
        <li class="navLi"><a href="index.html">Home</a></li>
        <li class="navLi"><a href="about.html">About</a></li>
        <li class="navLi"><a href="services.html">Services</a></li>
        <li class="navLi"><a href="#">Portfolio</a>

Demo

CSS文本与Mac浏览器对齐

1 个答案: