Mozilla 中的 CSS 选项卡问题

Question

我试图弄清楚为什么我的选项卡在基于 webkit 的浏览器甚至 IE7+ 中看起来都很好。由于某种原因，它们在 Mozilla 中看起来很奇怪。谁能给我一些提示来解决这个问题？

这是一个示例： http://jsbin.com/icomo4

这是 css：

        <style type="text/css">


        ul#activity-tabs {
            text-align: right;
            border-bottom: 1px solid #cccccc; 
            list-style-type: none;
            padding: 3px 10px 3px 10px; 
        }

        ul#activity-tabs li { 
                       display: inline;
        }

        ul#activity-tabs li.tab1 {
                  background-color: #fff; 
        }

        ul#activity-tabs li.tab1 a { 
                    padding: 3px 4px; 
                    border: 1px solid #cccccc; 
                    background-color: #fff;
                    color: #333333; 
                    position: relative;
                    top: 1px;
                    margin-right: 0px; 
                    text-decoration: none;
                    border-bottom: none;
                    padding-top: 4px; 
        }

        ul#activity-tabs li.tab1 a:hover { 
                          background: #fff; 
        }

        ul#activity-tabs li.tab2 { 
                  background-color: #fff; 
        }

        ul#activity-tabs li.tab2 a { 
                    padding: 3px 4px; 
                    background-color: #fff; 
                    color: #333333; 

                    margin-right: 0px; 
                    text-decoration: none;
                    border-bottom: none;
                    padding-top: 4px; 
        }

        ul#activity-tabs li.tab2 a:hover { 
                          padding: 3px;
                          border-top: 1px solid #cccccc; 
                          border-left: 1px solid #cccccc; 
                          border-right: 1px solid #cccccc; 
        }

    </style>

html：

    <ul id="activity-tabs">
    <li class="tab1"><a href="">Tab 1</a></li>
    <li class="tab2"><a href="">Tab 2</a></li>
</ul>

任何帮助都会不胜感激。谢谢！

Answer 1

这就是它们在我的 Firefox 3.6.10 中的样子