CSS 오버 플로우 : 숨김

Question

나는이 & CSS를 가지고 있으며 'overflow : hidden'태그가 파이어 폭스에서 작동하지 않습니다. 이게 내 엉망이야 ... 누가 왜 작동하지 않는지 알 겠어? 오버플로 태그가 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 롤오버를 구현하는 것입니다

는이 블록은 높은 18px 있어야하는데 , 배경 이미지는 36 픽셀 높이이며 롤오버는 롤오버를 달성하기 위해 배경 이미지를 위/아래로 밀었습니다.

텍스트가 정상적으로 (잘하면) 품질이 떨어지거나 CSS가없는 경우 저하됩니다. 패딩 윗면은 A 태그의 가시 블록 아래에 텍스트를 밀어 넣었으므로 오버 플로우가 숨겨졌습니다.

오버플로는 수직으로 아래로 밀린 텍스트를 숨기고 (배경 이미지 만 보이는 상태로 남겨 두어야 함), 여전히 파이어 폭스에 표시됩니다.

Answer 1

에 대한 규칙을 정의해야합니다 학자 연합니다 오버플로는 이 세로로 밀려나는 텍스트를 숨겨야합니다 ( 은 배경 이미지 만 표시). 그러나 여전히 0으로 표시됩니다.firefox.

패딩이 요소의 콘텐츠 높이 (기본 상자 모델에서 height 속성이 지정하는 것)에 추가되면 값이 공제되지 않습니다. 높이 : 0을 시도하면 텍스트가 사라지고 상자가 패딩 윗면만큼 높게 유지됩니다.

---

CSS 2.1 Specification: Box model

Answer 2

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 3

작동하지 않습니다. 그것으로 나타나지 않는 유일한 이유는 콘텐츠가 오버 플로우를 일으킬 수있을만큼 오래되지 않는 것입니다 귀하의 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 4

벌금.

Firefox와 Internet Explorer의 차이점은 Internet Explorer에서 잘못 표시 되었기 때문입니다.

페이지에 적절한 doctype이없는 경우 IE의 단조 모드로 렌더링됩니다. 즉, 요소의 크기에 채우기가 추가되지 않는 잘못된 상자 모델을 사용합니다. 이렇게하면 링크가 올바른 36 픽셀 대신에 18 픽셀 높이가됩니다. Alconja 말했다 무엇

W3C: recommended list of doctypes

Wikipedia: IE box model bug

Answer 5

뿐만 아니라, 당신이 정말로 a 소문자 a를 가진 요소가 아닌 대문자 A.