FireFox 中的 Tabstrip 在 Mac 和 Windows 上的呈现方式不同Ubuntu 与 PC

发布于 2024-10-05 00:40:28 字数 1559 浏览 1 评论 0原文

我有这个简单的 css tabstrip，它按预期呈现：

Mac 上的 Safari 5.0.2
PC 上的 IE8
PC 上的 FireFox 3.8.12

但是，在 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>

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

庆幸我还是我 2024-10-12 00:40:28

我使用以下代码来解决同样的问题：

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

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>

回复收藏 0 原文

~没有更多了~