Question

我正在试图弄清楚为什么我的标签在基于webkit的浏览器中看起来很好，甚至IE7 +。出于某种原因，他们在Mozilla看起来很不稳定。任何人都可以给我一些解决这个问题的技巧吗？

这是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中的样子

Mozilla中的CSS Tab问题

1 个答案: