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

我试图使用无序列表和CSS（3）创建基于选项卡的菜单。基于CSS的选项卡的无序列表 - Chrome问题

样品可以在这里看到：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进行重置。

来源

2010-10-22 schone

尝试一个doctype，它不会使它在'BackCompat'模式下呈现。 – 2010-10-22 15:31:27

这是什么？ – schone 2010-10-22 23:38:36

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

来源

2010-10-22 15:25:46

将填充底部更改为3px可以修复Firefox中的问题，但不能修复Chrome中的问题。 – schone 2010-10-22 23:40:23

在Firefox 3.x上。 – schone 2010-10-23 00:06:18

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

回答

相关问题