在Firefox中打破CSS菜单(显示:table-cell;)

Question

HTML:

<td align="center" width="100%">
<a class="Forum_ib_moderate" href="Default.aspx" title="Moderate"></a>
<a class="Forum_ib_admin" href="Default.aspx" title="Admin"></a>
...

CSS:

A.Forum_ib_moderate:link, A.Forum_ib_moderate:visited, A.Forum_ib_moderate:active, A.Forum_ib_moderate:hover
{
background-image: url(images/ib_moderate.png);
background-repeat: no-repeat;
background-position: center;
padding-left: 2px;
padding-right: 2px;
padding-top: 8px;
padding-bottom: 0px;
height: 35px;
width: 35px;
display:table-cell;
}

A.Forum_ib_admin:hover
{
background-image: url(images/ib_admin_hover.png);

}

菜单在IE中看起来很好,在Firefox中显示垂直.如果我关闭"显示:table-cell;" 在Firebug中的样式,然后将其重新打开,它修复了该菜单节点.

替代文字http://i39.tinypic.com/29as4k7.jpg

有任何想法吗？

ps:我不想搞乱菜单本身,因为它是DNN论坛4.4.3的一部分.我宁愿修复CSS以使其正确显示.

Answer 1

实际上我认为你会发现IE有效,因为它忽略了 display: table-cell. Display: table-cell实际上你是个问题.

我猜测正在发生的是,IE正在将它们恢复为内联元素,因此是水平的.

将其更改为:

display: inline;

根据需要添加一些填充(左和右),你会得到你想要的.

或者,您可以浮动它们(左和/或右).

Besdies,他们已经在桌子上了.表格单元显示里面有点不对劲.