Переполнение CSS: скрыто

Question

У меня есть этот HTML & 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>

EDIT:

Я просто хотел обновить / уточнить:

Это предназначено для реализации ролловеров CSS, блок А должен иметь высоту 18 пикселей, фоновое изображение - 36 пикселей, и ролловер будет нажимать вверх / вниз фоновое изображение для достижения пролонгации.

Текст на месте, чтобы изящно (надеюсь) ухудшиться, если у них нет CSS или что-то еще. верхний отступ идеально помещает текст НИЖЕ видимого блока тега А, поэтому переполнение скрыто.

Переполнение должно скрывать текст, который вертикально сдвинут (оставляя видимым только фоновое изображение), однако, он все еще отображается в Firefox.

Answer 1

Это работает. Единственная причина, по которой это не выглядит так: ваш контент недостаточно длинный, чтобы вызвать переполнение.

<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

Переполнение должно скрывать текст, который вертикально отталкивается (оставляя видно только фоновое изображение), Тем не менее, он все еще показывает в светлячок.

Заполнение добавляется к высоте содержимого элемента (которая задается свойством height в блочной модели по умолчанию), из него оно не вычитается Попробуйте height: 0, чтобы текст исчез, а рамка осталась такой же высокой, как отступ.

---

CSS 2.1 Спецификация: модель коробки

Answer 3

Что сказал Alconja, но чтобы быть педантичным, вы должны действительно определить свои правила для элемента a с строчными буквами a, а не с прописными буквами A.

Answer 4

Работает просто отлично.

Если вы видите отличие Firefox от Internet Explorer, это связано с тем, что он некорректно отображается в Internet Explorer.

Если у вас нет правильного типа документа на вашей странице, он будет отображаться в режиме причуд в IE, что означает, что он использует неправильную блочную модель, где отступ не добавляется к размеру элемента. Это делает ссылки высотой 18 пикселей вместо правильных 36 пикселей.

W3C: рекомендуемый список типов документов

Википедия: ошибка модели коробки IE

Answer 5

Чтобы отличить 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, просто создайте для них разные классы и установите ширину в классах. Вы можете применять любое количество классов CSS к объекту, разделяя их пробелом:

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