CSS 菜单在 Firefox 中损坏 (display:table-cell;)

发布于 2024-07-14 01:23:39 字数 1023 浏览 10 评论 0原文

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.

alt text

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

一影成城 2024-07-21 01:23:39

实际上,我认为您会发现 IE 可以工作,因为它忽略 display: table-cellDisplay: table-cell 实际上是你的问题。

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

将其更改为:

display: inline;

根据需要添加一些填充(左侧和右侧),您将得到您想要的。

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

亲爱的,它们已经在表格单元格中了。 表格单元格里面的显示有点不对劲。

Actually I think you'll find that IE works because it ignores display: table-cell. Display: table-cell is 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:

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.

旧伤还要旧人安 2024-07-21 01:23:39

我们也遇到过这个问题。 仍在寻找解决方案。 在我们的例子中,我们需要保留 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.

北凤男飞 2024-07-21 01:23:39

似乎是一个简单的 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.

迷离° 2024-07-21 01:23:39

这听起来类似于我也试图修复的 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:

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文