2011-08-31 9 views
9

td 요소 내에 절대적으로 배치 된 내용을 사용할 때 문제점을 발견했습니다. 콘텐츠가 body에 상대적인 위치에 있으므로 td 요소가 위치 지정된 요소로 인식되지 않습니다. 이 문제는 FireFox에서만 발생하며 예상 레이아웃은 다른 브라우저 (jsfiddle)에서 볼 수 있습니다.디스플레이에 Firefox 문제 : 절대 테이블 셀에

주위를 약간 파고 드는 것은이 문제가 표 셀의 기본 표시 유형으로 display:table-cell을 사용하는 FireFox와 관련이있는 것으로 보입니다. 디스플레이를 block으로 변경하거나 div 컨테이너를 추가하여 콘텐츠에 배치 된 컨테이너 역할을 수행하여 문제를 해결할 수 있습니다.

셀의 디스플레이 유형을 block으로 변경하지 않는 이유는 무엇입니까? 한 브라우저에서 문제를 해결하기 위해 요소를 추가하는 대신이 방법을 사용하는 것을 선호합니다.

div style absolute in a table cell 또는 Why "display: table-cell" is broken when "position: absolute"과 같은 문제는 아닙니다.

+0

+1 나는 몇 일 전에 같은 문제가 있었는데, 나는 내가하려고 한 일을 바꿀 것을 강요 당했다. –

+0

@ric_bfa - 내가 무엇을 유발하는지 알았으니 이제 다른 것보다 더 성가심을 느낍니다. IE7조차 예상대로 동작하고 FireFox가 그렇지 않을 때 세상은 끝나고 있다고 생각했습니다. 여기서는 – detaylor

+0

과 같지만, IE는 작동합니다. 다른 사람은 확실히 잘 할 것입니다. 그러나이 경우에는 큰 놀라움이었습니다. –

답변

11

셀 표시를 block으로 설정하면 익명의 표 셀에 포장됩니다. 결과 CSS 상자 트리는 셀 안에 <div>을 만들고 해당 셀에 모든 셀의 스타일과 속성을 설정 한 것과 같습니다.

많은 용도로 사용 가능합니다. 셀에 rowspan 또는 colspan이있는 경우 (블록에서 아무 것도 의미가 없기 때문에) 또는 셀에 테두리 축소에 참여할 것으로 예상되는 테두리 스타일이 있거나 서로 옆에 두 개의 셀이있는 경우 중단됩니다. (두 블록은 단일 테이블 셀에 랩핑되며 두 개의 개별 테이블 셀로는 래핑되지 않기 때문입니다). 행동이 예기치 않게 발생하는 다른 상황이있을 수 있습니다. 그러나 스타일과 내용을 충분히 제어 할 수 있고 셀 스타일을 너무 많이 지정하지 않으면이 방법이 효과적입니다.

+0

고맙습니다. 훌륭한 답변입니다. 다른 셀이 두 줄로 감싸지면'display : block '이있는 셀이 예상대로 확장되지 않았다고 설명했습니다. – detaylor

+0

@ Boris Zbarsky : rowspan 및 colspan 사용과 관련된 문제가 있습니까? – krish

+0

실제 블록을 셀에 넣고 '위치 : 상대'스타일을 지정하는 것만으로는 부족합니다. 물론 버그 수정 파이어 폭스. –

-2

TD의 위치를 ​​상대적으로 설정하려고 시도 했습니까?

이렇게하면 위치가 재설정됩니다. 사실, 당신이 얻고있는 것은 올바른 행동이며, TD와 관련된 것이 아니어야합니다. 그러나 브라우저는 재미 있습니다.

당신이 명시 적으로 설정해야하는 이유에 대한 자세한 내용은

확인 :
http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/

..

업데이트 :이 대답은 옵션을 시도 을 제안

. 그것은보다 먼저 로 작성되었으며, 기록상의 이유로 삭제되지는 않았으며 검색 엔진에서 약간 유사하지만 동일하지 않은 문제에 대해 다른 관련 가능성이 있기 때문에 삭제되었습니다. 이해해 주셔서 감사합니다.

+1

예,'td'의 위치는 명시 적으로'relative'로 설정됩니다. 파이어 폭스를 제외한 모든 브라우저는 'body'에 상대적인 FF 위치 인 'td'에 비례하여 내용을 배치합니다. 'position : table-cell'은'td'가 오프셋 부모가되는 것을 멈추게합니다. – detaylor

+2

나는 똑같은 문제가있다. 파이어 폭스를 제외한 모든 브라우저는 "위치 : 절대;" 가장 가까운 "위치에 관련된 콘텐츠 : 상대적;" 부모,하지만 개체가 "display : table-cell;" firefox는이를 무시하고 body와 관련된 절대적인 내용을 설정합니다. 성가신. –