Tabstrip dans FireFox rend différemment sur Mac et Ubuntu vs PC

J'ai ce simple tabstrip css qui rend comme prévu dans:Tabstrip dans FireFox rend différemment sur Mac et Ubuntu vs PC

Safari 5.0.2 sur Mac
IE8 sur PC
FireFox 3.8. 12 sur PC

Cependant, dans FireFox 3.8.12 sur Mac et Ubuntu, les onglets chevauchent la bordure inférieure du conteneur div de 1 pixel. Je ne suis pas un expert CSS et je n'ai pas compris comment obtenir cette (ou une meilleure solution) pour rendre le même dans FireFox sur toutes les plateformes.

Des suggestions?

code:

<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>

Source

2010-11-25 Mazaryk

J'utilise le code suivant pour résoudre le même problème:

<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>

Source

2011-10-03 18:01:21 James

Tabstrip dans FireFox rend différemment sur Mac et Ubuntu vs PC

Répondre

Questions connexes