Firefox中的CSS菜单损坏(显示:table-cell;) [英] CSS menu broken in Firefox (display:table-cell;)

问题描述

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中垂直显示.如果我关闭"display:table-cell;" Firebug中的样式，然后再将其重新打开，即可修复该菜单节点.

the menu looks just fine in IE, shows up vertical in Firefox. If i turn off "display:table-cell;" style in Firebug and then turn it back on, it fixes that menu node.

有什么想法吗?

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

p.s.: i don't want to mess with the menu itself, since it's a part of a DNN Forum 4.4.3. I'd rather fix the CSS to make it show correctly.

推荐答案

实际上，我认为您会发现IE有效，因为它忽略 display: table-cell. Display: table-cell实际上是您的问题.

Actually I think you'll find that IE works because it ignores display: table-cell. Display: table-cell is actually you're problem.

我猜正在发生的事情是IE正在将那些内容还原为内联元素，因此是水平的.

What I'm guessing is happening is that IE is reverting those to be inline element, hence horizontal.

将其更改为:

display: inline;

根据需要添加一些填充(左右)，您将获得所需的内容.

add some padding (left and right) as necessary and you'll get what you want.

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

Alternatively you can float them (left and/or right).

贝迪斯，它们已经在表格单元格中了.表格单元格内部的显示有点错误.

Besdies, they're already in a table cell. Table cell display inside that is a bit wrong.

这篇关于Firefox中的CSS菜单损坏(显示:table-cell;)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！