CSS 菜单在 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 中垂直显示。 如果我关闭“显示：表格单元格；” 在 Firebug 中设置样式，然后重新打开它，它会修复该菜单节点。
有任何想法吗？
ps：我不想弄乱菜单本身，因为它是 DNN 论坛 4.4.3 的一部分。 我宁愿修复 CSS 以使其正确显示。
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);
}
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.
any ideas?
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
实际上，我认为您会发现 IE 可以工作，因为它忽略
display: table-cell。Display: table-cell实际上是你的问题。我猜测正在发生的事情是 IE 正在将它们恢复为内联元素，因此是水平的。
将其更改为：
根据需要添加一些填充（左侧和右侧），您将得到您想要的。
或者，您可以浮动它们（向左和/或向右）。
亲爱的，它们已经在表格单元格中了。 表格单元格里面的显示有点不对劲。
Actually I think you'll find that IE works because it ignores
display: table-cell.Display: table-cellis actually you're problem.What I'm guessing is happening is that IE is reverting those to be inline element, hence horizontal.
Change it to:
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.
我们也遇到过这个问题。 仍在寻找解决方案。 在我们的例子中，我们需要保留 display: table-cell 布局。
Firefox 有时看似随机地会导致表格单元格对象换行，而不是像实际表格一样工作。 刷新可以修复它，但这只会使修复错误变得更加困难。
We've run into this issue as well. Still looking for a solution. In our case, we need to keep display: table-cell layout.
It appears Firefox sometimes and seemingly randomly, will cause table-cell objects to wrap rather than act like an actual table. A REFRESH fixes it, which just makes it that more difficult to bug fix.
似乎是一个简单的 FireFox bug。 我以相反的方式遇到了问题：在 Win XP 上的 FF 3.5.9 中刷新后，带有表格单元格的 DIV 排列在彼此下方。
我无法找到任何解决方案（将单元格包装成一行，隐藏溢出等），但将 FireFox 更新到 3.6.3，并希望该版本的用户很少。
Seems to be a simple FireFox bug. I encountered the problem the other way around: The DIVs with table-cell arranged below each other after the refresh in FF 3.5.9 on Win XP.
I was not able to not find any solution (wrap the cells into a row, overflow hidden, etc) but to update FireFox to 3.6.3 and hope there are few users with that version.
这听起来类似于我也试图修复的 Firefox 回流错误。 显然，表格对于渲染来说确实很糟糕，因为它们会导致回流，而且 Firefox 有时会错过回流。
我发现以下页面很有帮助：
This sounds similar to a firefox reflow bug that I'm trying to fix as well. Apparently tables are really bad for rendering, since they cause a reflow and it seems that Firefox sometimes misses the reflows.
I found the following pages to be helpful: