标签栏在Firefox呈现不同在Mac和Ubuntu VS PC

我有这个简单的CSS标签栏呈现如预期：标签栏在Firefox呈现不同在Mac和Ubuntu VS PC

的Safari 5.0.2在Mac
IE8在PC
火狐3.8。 12在PC上

但是，在Mac和Ubuntu的FireFox 3.8.12上，选项卡与容器div的底部边界重叠1个像素。我不是css专家，并没有想出如何让这个（或更好的解决方案）在所有平台上呈现相同的FireFox。

有什么建议吗？

代码：

<html> 
<head> 
<style type="text/css"> 

body { 
font-family: Verdana, Arial; 
} 

#tabstrip { 
width:700px; 
border-bottom: 5px solid #6a8fa7; 
font-size: 12px; 
font-weight: bold; 
display: block; 
height: 21px; 
margin: 0; 
padding: 0 0 0px 0; 
} 

#tabstrip ul { 
margin: 0; 
padding: 1px 0 0 0; 
list-style: none; 
} 

#tabstrip li { 
display: inline; 
float: left; 
} 

#tabstrip a { 
color: #999999; 
padding: 5px 8px; 
margin-bottom: 4px; 
background-color: #d7d7d7; 
margin: 0 2px; 
text-decoration: none; 
} 

#tabstrip a:first-child { 
margin-left: 0; 
} 

#tabstrip a.selected { 
background-color: #6a8fa7; 
color: #fff; 
text-shadow: 1px 1px 2px #666; 
} 

#tabstrip a.done { 
background-color: #60b43f; 
color: #fff; 
text-shadow: 1px 1px 2px #666; 
} 


</style> 
</head> 
<body> 

<br/><br/> 

<div id="tabstrip"> 
<ul> 
    <li><a href="/" class="done">Item 1</a></li> 
    <li><a href="/" class="selected">Item 2</a></li> 
    <li><a href="/">Item 3</a></li> 
    <li><a href="/">Item 4</a></li> 
    <li><a href="/">Item 5</a></li> 
</ul> 
</div> 

</body> 
</html>

来源

2010-11-25 Mazaryk

我用下面的代码来解决同一个问题：

<script type="text/javascript"> 
    var csstype="inline" //Specify type of CSS to use. "Inline" or "external" 
    var mac_css='#nav li a {line-height: 46px; padding-top: 14px; padding-bottom: 13px;}' //if "inline", specify mac css here 
    var pc_css='#nav li a {line-height: 43px; padding-top: 13px; padding-bottom: 11px;}' //if "inline", specify PC/default css here 
    var mac_externalcss='/style/macstyle.css' //if "external", specify Mac css file here 
    var pc_externalcss='/style/pcstyle.css' //if "external", specify PC/default css file here 
    ///////No need to edit beyond here//////////// 
    var mactest=navigator.userAgent.indexOf("Mac")!=-1 
    if (csstype=="inline"){ 
     document.write('<style type="text/css">') 
     if (mactest) 
     document.write(mac_css) 
     else 
     document.write(pc_css) 
     document.write('</style>') 
     } 
     else if (csstype=="external") 
     document.write('<link rel="stylesheet" type="text/css" href="'+ (mactest? mac_externalcss : pc_externalcss) +'">') 
     </script>

来源

2011-10-03 18:01:21 James

标签栏在Firefox呈现不同在Mac和Ubuntu VS PC

回答

相关问题