Tabstrip in FireFox renders differently on Mac & Ubuntu vs PC
I have this simple css tabstrip that renders as expected in:
- Safari 5.0.2 on Mac
- IE8 on PC
- FireFox 3.8.12 on PC
However, in FireFox 3.8.12 on Mac and Ubuntu the tabs overlap the 开发者_StackOverflow社区bottom border of the container div by 1 pixel. I'm no css expert and haven't figured out how to get this (or a better solution) to render the same in FireFox on all platforms.
Any 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>
I used the following code to fix the same issue:
<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>
加载中,请稍侯......
精彩评论