CSS溢出:隐藏

Question

我有这个HTML & CSS，而'overflow: hidden‘标签在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翻转，A块应该是18px高，背景图像是36px高，翻转将向上/向下推背景图像以实现翻转。

如果他们没有CSS或其他东西，文本会优雅地(希望)降级。理想情况下，填充顶部将文本推到A标记的可见块下方，从而隐藏溢出。

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

Answer 1

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

填充被添加到元素的内容高度(这是height属性在默认框模型中指定的高度)，它不会从其中减去。尝试height: 0可以看到文本消失，并且框保持与填充顶部一样高。

CSS 2.1 Specification: Box model

Answer 2

它确实有效。它看起来没有溢出的唯一原因是你的内容不够长，不足以导致溢出……如果你的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>

Answer 3

为了使overflow: hidden;有所不同，您需要将对象的width设置为固定值。

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

如果您需要使用此css id的对象具有不同的宽度，只需为它们创建不同的类并在类中设置宽度即可。您可以将任意数量的css类应用于对象，方法是用空格分隔它们：

<div class="oneclass anotherclass">this div will apply both the .oneclass
    and the .anotherclass css style classes.</div>