Question

我有这个HTML＆amp; CSS和'overflow：hidden'标签在firefox中不起作用。这让我感到难过......有谁知道为什么它不起作用？是不是因为A标签上不支持溢出标签？

#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高，背景图像是36像素高，并且翻转会向上/向下推动背景图像以实现翻转。

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

溢出应该隐藏垂直向下推的文本（只留下背景图像可见），但是，它仍然在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>

Answer 2

溢出应该隐藏文本垂直向下推（离开只有背景图像可见），然而，它仍然在显示火狐。

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

CSS 2.1 Specification: Box model

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>

Answer 4

它运作得很好。

如果您发现Firefox与Internet Explorer存在差异，那是因为它在Internet Explorer中显示不正确。

如果您的页面上没有正确的doctype，它将在IE中以怪异模式呈现，这意味着它使用了不正确的框模型，其中填充不会添加到元素的大小。这使链接高18像素而不是正确的36像素。

W3C: recommended list of doctypes

Wikipedia: IE box model bug

Answer 5

Alconja说了什么，但也是迂腐的，你应该用{@ 1}}元素定义你的规则，用小写字母a而不是大写字母A.

CSS溢出：隐藏

5 个答案: