Я пытаюсь создать меню на основе вкладок, используя неупорядоченные списки и 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 он добавляет дополнительный пиксель отступа внизу, который закрывает нижнюю границу (см. Изображение ниже)
Кто-нибудь знает исправление для этого? В настоящее время я также использую сброс Эрика Мейерса.