个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 14:54:20 25 4
gpt4 key购买 nike

我正在尝试使用无序列表和 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 重置。

最佳答案

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

关于css - 基于 CSS 的选项卡的无序列表 - Chrome 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3998223/

25 4 0
文章推荐： html - 将 Bootstrap 4 导航栏与 wordpress 4.x 合并的问题
文章推荐： javascript - 日期格式正则表达式匹配日期分隔符
文章推荐： css - flask Boot watch : css is not loading in "/" paths
文章推荐： javascript - 如何将字符串转换为对象属性？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com