CSS溢出：隐藏

我有这样的HTML CSS &和“溢出：隐藏”标签不能在Firefox工作。这是困扰我...任何人都知道为什么它不工作？这是否仅仅是因为A标签不支持溢出标签？CSS溢出：隐藏

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

文本在地方优雅地（希望）降低，如果他们没有CSS或什么的。理想情况下，填充顶部将A标签的可见块的文本推下，因此溢出隐藏。

溢出应该隐藏垂直按下（只留背景图像中可见）的文本，但是，它仍然显示在Firefox。

来源

2009-05-01 Roy Rico

嗯，什么是你想实现什么呢？ – cletus 2009-05-01 00:41:46

当你说它“不工作”时，你是什么意思？当你使用它时会发生什么，这与你的期望有什么不同？ – Guffa 2009-05-01 00:43:18

的您的规则溢出应该隐藏垂直向下推文（留下仅背景图像中可见），但是，它仍然显示在 firefox。

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

CSS 2.1 Specification: Box model

来源

2009-05-01 09:04:34 Anonymous

为了使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>

来源

2009-05-01 00:44:27

他确实有宽度，在＃sidebarX样式中。 – Alconja 2009-05-01 00:45:59

它确实有效。它不会出现是唯一的原因是你的内容是不是足够长，导致溢出......如果你的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>

来源

2009-05-01 00:44:28 Alconja

它的工作只是精细。

如果你看到从Internet Explorer在Firefox的差异，这是因为它在Internet Explorer中显示不正确。

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

W3C: recommended list of doctypes

Wikipedia: IE box model bug

来源

2009-05-01 00:56:41 Guffa