CSS 溢出 : hidden

Question

我有这个 HTML 和 CSS，但“溢出:隐藏”标签在 Firefox 中不起作用。这让我感到难过...有人知道为什么它不起作用吗？是因为A标签不支持overflow标签吗？

#page_sidebar_tabs A {
    float: left;
    border: 1px solid #0F0;
    display: block;
    line-height: normal;
    padding-top: 18px !important;
    height: 18px !important;
    overflow: hidden !important;
    border-bottom: 2px solid #EEB31D;
}

#page_sidebar_tabs A:hover, .sidebar_active_tab {
    background-position: 0 -18px !important;
}

a#sidebar1 {
    background: url(../sidebar/tab1.gif) top left transparent no-repeat;
    width: 76px;
}

a#sidebar2 {
    background: url(../sidebar/tab2.gif) top left transparent no-repeat;
    width: 55px;
}

a#sidebar3 {
    background: url(../sidebar/tab3.gif) top left transparent no-repeat;
    width: 55px;
}

HTML:

<div id="page_sidebar_tabs">
    <a href="#" id="sidebar1" onClick="return SidebarTabOnClick('1');">ABC</a>
    <a href="#" id="sidebar2" onClick="return SidebarTabOnClick('2');">DEF</a>
    <a href="#" id="sidebar3" onClick="return SidebarTabOnClick('3');">GHI</a>
</div>

编辑:

我只是想更新/澄清:

这是为了实现css rollovers，A block 应该是18px高，背景图是36px高，rollover会把背景图上/下推来实现rollover。

如果他们没有 CSS 或其他任何东西，现有的文本可以优雅地(希望)降级。 padding-top 理想地将文本推到 A 标签的可见 block 下方，因此隐藏了溢出。

溢出应该隐藏垂直向下推的文本(只留下背景图像可见)，但是，它仍然显示在 firefox 中。

Answer 1

它确实有效。它似乎不是的唯一原因是您的内容不够长而不会导致溢出...如果您的 html 看起来像这样，您会发现它工作得很好:

<div id="page_sidebar_tabs">
    <a href="#" id="sidebar1" onClick="return SidebarTabOnClick('1');">ABCABCABCABCABCABCABC</a>
    <a href="#" id="sidebar2" onClick="return SidebarTabOnClick('2');">DEFDEFDEFDEFDEFDEFDEF</a>
    <a href="#" id="sidebar3" onClick="return SidebarTabOnClick('3');">GHIGHIGHIGHIGHIGHIGHI</a>
</div>