问题
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.
回答1:
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.
回答2:
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.
回答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.
回答4:
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:
- http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
- http://www.mozilla.org/newlayout/doc/reflow.html
来源：https://stackoverflow.com/questions/605967/css-menu-broken-in-firefox-displaytable-cell