[英]CSS: Horizontal Tabs Displaying Vertically in IE6 and Firefox
I have some CSS and HTML for horizontal tabs that works perfectly in jsfiddle. 我有一些CSS和HTML用于水平制表符,它们在jsfiddle中完美地工作。 However, in both Firefox 13 and IE6 (the browser I most need this to work in) the tabs are displayed as a vertical unordered list.
但是,在Firefox 13和IE6(我最需要它的浏览器)中,选项卡都显示为垂直无序列表。
Here is the CSS: 这是CSS:
.tablist
{
list-style:none;
height:2em;
padding:0;
margin:0;
border: none;
}
.tablist li
{
display:inline-block;
float: left;
}
.tablist li a
{
float: left;
margin-right:0.13em;
padding:0 1em;
text-decoration:none;
border:0.06em solid #000;
border-bottom:0;
font:bold 0.88em/2em arial,geneva,helvetica,sans-serif;
color:#000;
background-color:#ccc;
/* CSS 3 elements */
webkit-border-top-right-radius:0.50em;
-webkit-border-top-left-radius:0.50em;
-moz-border-radius-topright:0.50em;
-moz-border-radius-topleft:0.50em;
border-top-right-radius:0.50em;
border-top-left-radius:0.50em;
}
.tablist li a:hover
{
background:#3cf;
color:#fff;
text-decoration:none;
}
.tablist li#current a
{
background-color: #777;
color: #fff;
}
.tablist li#current a:hover
{
background: #39C;
}
And here is the HTML: 这是HTML:
<div class="tablist">
<ul>
<li><a href="#Dashboard"><strong>Tutorialsphere</strong></a></li>
<li><a href="#"><strong>Photoshop</strong></a></li>
<li><a href="#"><strong>Illustrator</strong></a></li>
<li><a href="#"><strong>Fireworks</strong></a></li>
<li><a href="#"><strong>Flash</strong></a></li>
<li><a href="#"><strong>CSS</strong></a></li>
<li><a href="#"><strong>PHP</strong></a></li>
</ul>
</div>
For a while this was working in Firefox and I don't remember changing anything -- but I must have. 有一阵子在Firefox 中工作,我不记得更改任何东西了-但我必须做。
Any advice is appreciated. 任何建议表示赞赏。
Regards. 问候。
IE6 doesn't support inline-block. IE6不支持内联阻止。 As such, it's just ignoring your display property and leaving it at its default.
这样,它只是忽略您的显示属性,并将其保留为默认值。
I don't have IE6 handy, but try display: block; 我没有IE6,但是请尝试使用display:block; float:left to this selector: .tablist li a
float:离开此选择器:.tablist li a
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.