Question

我无法为此菜单的标签设置“开启”状态。由于IE 6显示问题，我最终从使用UL和LI迁移。我现在正在使用一张桌子。

Table在目标浏览器中运行良好，在Opera中存在翻转颜色错误，但其余的都很好。

我需要为加载的标签设置一个“开”状态，它具有翻转样式。

到目前为止，我还未能对个人<TD>进行任何更改。

有问题的网页正在http://hiv411.dreamhosters.com/page.php

进行开发

非常感谢您的任何建议！

表格代码如下：

<table border="0" cellspacing="0" cellpadding="0" class="tabs"> 
<tr> 
    <td class="tabs"><a href="page.php" class="tabs">First Link</a></td> 

    <td class="tabs"><a href="page.php" class="tabs">Another Link</a> </td> 

    <td class="tabOn"><a href="page.php" class="tabOn">A Third Link Which is Longer</a> 

</td> 
    </tr> 
</table>

CSS就像这样：

.tabOn td {
    width:140px;
    height:29px;
   border: 1px solid #fff;
    background-image:none;
    background-color:#FFF;
    color:#000;
   font-size:9pt;
   font-weight:bold;
   text-align:center;
   white-space:nowrap;
}
.tabOn td a{
   color:#000;
   display: block;
   padding: 6px;
   padding-top:7px;
   height:17px;
   text-decoration: none;
   margin-top:1px;
   white-space:nowrap;
}

/* NORMAL STATE */

table.tabs {
   border-collapse: collapse;
}
table.tabs td {
    width:140px;
    height:29px;
   border: 1px solid #fff;
   background:url(/images/tabOverBG.jpg) repeat-x;
   background-position:bottom;
   font-size:9pt;
   font-weight:bold;
   text-align:center;
   white-space:nowrap;
}
table.tabs td a{
   display: block;
   padding: 6px;
   height:17px;
   text-decoration: none;
   margin-top:4px;
   white-space:nowrap;
}
table.tabs td a:link, table.tabs td a:visited {
   color: #fff;
}
table.tabs td a:hover, table.tabs td a:active, table.tabs td:hover {
   color: #000;
   background-color: #fff;
   background-image:none;
}

Answer 1

.tabOn td td.tabOn不应该.tabOn td a？ td.tabOn a也应为<tr class="tabOn">

现在你的方式是{{1}}

Answer 2

您需要做的是更改css的顺序，首先是常规标记和类。并且应用相同的类table.tabs（因此css不会覆盖属性），您可以节省空间但不能在.tabOn中两次写入相同的属性：

table.tabs {
   border-collapse: collapse;
}
table.tabs td {
   width:140px;
   height:29px;
   border: 1px solid #fff;
   background:url(/images/tabOverBG.jpg) repeat-x;
   background-position:bottom;
   font-size:9pt;
   font-weight:bold;
   text-align:center;
   white-space:nowrap;
}
table.tabs td a{
   display: block;
   padding: 6px;
   height:17px;
   text-decoration: none;
   margin-top:4px;
   white-space:nowrap;
}
table.tabs td a:link, table.tabs td a:visited {
   color: #fff;
}
table.tabs td a:hover, table.tabs td a:active, table.tabs td:hover {
   color: #000;
   background-color: #fff;
   background-image:none;
}
table.tabs td.tabOn {
   background-image:none;
   background-color:#FFF;
   color:#000;
}
table.tabs td.tabOn a{
   color:#000;
   margin-top:1px;
}

用另一个类覆盖自定义CSS

2 个答案: