與Mac瀏覽器進行CSS文本對齊

我已經創建了一個CSS頂欄菜單，它使用|字符作爲分隔符。它的渲染與我在Linux或Windows上嘗試的任何瀏覽器應該完全相同。但是，在Mac上，使用任何瀏覽器，|字符下拉一行左右，並呈現在菜單欄下方。與Mac瀏覽器進行CSS文本對齊

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>

任何幫助將不勝感激。由於

來源

2014-09-20 user2383507

如果是我..

我把我所有的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

來源

2014-09-21 00:41:57 rwxes

與Mac瀏覽器進行CSS文本對齊

回答

相關問題