Question

我正在尝试使用无序列表和CSS（3）创建基于选项卡的菜单。

可在此处查看示例：http://prashantraju.com/pat/tabs.html或此处的代码：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
        <title></title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <style type="text/css"> 
           /* Reset */
            html {
                margin:0;
                padding:0;
                border:0;
            }
        body, div, span, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, code,
        del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, dialog, figure, footer, header,
        hgroup, nav, section {
            margin: 0;
            padding: 0;
            border: 0;
            font-weight: inherit;
            font-style: inherit;
            font-size: 100%;
            font-family: inherit;
            vertical-align: baseline;
        }

        /* This helps to make newer HTML5 elements behave like DIVs in older browers */
        article, aside, dialog, figure, footer, header,
        hgroup, nav, section {
            display:block;
        }

        /* Line-height should always be unitless! */
        body {
            line-height: 1.5;
            background: white;
        }

        /* Tables still need 'cellspacing="0"' in the markup. */
        table {
            border-collapse: separate;
            border-spacing: 0;
        }
        /* float:none prevents the span-x classes from breaking table-cell display */
        caption, th, td {
            text-align: left;
            font-weight: normal;
            float:none !important;
        }
        table, th, td {
            vertical-align: middle;
        }

        /* Remove possible quote marks (") from <q>, <blockquote>. */
        blockquote:before, blockquote:after, q:before, q:after { content: ''; }
        blockquote, q { quotes: "" ""; }

        /* Remove annoying border on linked images. */
        a img { border: none; }

        /* Remember to define your own focus styles! */
        :focus { outline: 0; }

        /* Eof reset */

        /* Tab */

        #tabs {
            padding: 10px
        }
        #tabs ul {
            border-bottom: 1px solid #d5d5d5;
            margin: 0;
            padding: 0;
        }
        #tabs ul li {
            display: inline;
            list-style-type: none;

        }
        #tabs ul li a {
            background: #f9f9f9;
            border-top: 1px solid #d5d5d5;
            border-right: 1px solid #d5d5d5;
            border-left: 1px solid #d5d5d5;
            margin-left: 5px;
            text-shadow: 1px 1px 0 #ffffff;
            -moz-border-radius: 2px 2px 0 0;
            -webkit-border-radius: 2px 2px 0 0;
            color: #666;
            text-decoration: none;
            padding: 5px 5px 4px 5px;

        }
        #tabs ul li a:hover {}
        #tabs ul li a:active,
        #tabs ul li.selected a {
            background: #ffffff;
            background: -moz-linear-gradient(top, #f3f3f3 0%, #ffffff 100%);
            background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#ffffff));
            border-bottom: 1px solid #ffffff;
            color: #333333;
            font-weight: bold;
        }

        /* Eof tab*/
    </style> 
</head> 
<body> 
    <div id="tabs"> 
        <ul> 
            <li class="selected"><a href="#">I'm a tab!</a></li> 
            <li><a href="#">Look, I'm also a tab!</a></li> 
            <li><a href="#">I'm also a tab</a></li> 
        </ul> 
    </div> 
</body>

出于某种原因，它在Firefox中渲染得很好但是在Chrome中它在底部添加了额外的填充像素，覆盖了底部边框（见下图）

alt text

有人知道解决这个问题吗？我目前正在使用Eric Meyers重置。

Answer 1

该页面还在firefox 4中显示此行为，因此我假设这是正确的基于标准的行为。将padding-bottom更改为3px而不是4px似乎可以解决这两种浏览器中的问题。

基于CSS的选项卡的无序列表 - Chrome问题

1 个答案: