1
我有這個簡單的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>