을 중심으로 UL 지 않을 수평으로 확장 Firefox/오페라(작품에서 사파리,IE6/7/8)

Question

내가 중심으로 ul(스타일 테이블과 같은 ala cssplay)가 있는 리튬 요소를 추가한 후 그것 페이지 렌더링 작동하는 것 같이 아름답게 모든 하지만 파이어 폭스가 제공됩니다.

원하는 효과가 있는 행의 리 요소를 중심으로도 하나만 있는 경우 또는 두 가지입니다.이 예제를 시뮬레이션 문제를 jQuery 를 추가하는 리 두 초 후에 페이지 준비가 된 것입니다.

어떤 이유로,그것은 다음과 같 Firefox3.05 및 오페라 9.63 유지하 ul 초기에 그 폭은 후에 세 번째는 리튬이 추가되도가 없지만 폭을 지정한 어디에서 CSS.

이것은 물론,절대적으로 죽이 내게 어떤 도움을 감사하겠습니다.

http://deadguy.reliccommunity.com/stuffbox/testinggrounds/display-table.html

Answer 1

이 table-* 표시 형식은 여전히 매우 underdefined,그리고 그것은 전혀 놀라운 당신은 다른 동작 여기에.내 경험에 의하면,FF 또한 몇 가지 문제가 있으로 적용하는 특정 규칙을 삽입되는 내용입니다.다행히도,거기에 더 직관적인 방법으로 코드를 이 페이지는 또한 일 일.

보다는 설정 <ul/> 하기 display:table,그것을 떠날로 display:block (기본값)고 text-align:center.당신이하지 않는 <ul/> shrinkwraps 인라인이블 이 경우에는(그 결과는 당신의 코드를 달성하기),당신이 원하는 테이블 스스로를 중심으로.

보너스로,이를 제거할 수 있도록 포장 <div/>, 이후,그것은 단지가있을 제공하는 경계에 대해 <ul/>의 여백을 밀어 있습니다.지 않기 때문에 당신은 당 사용하여 그들의 여백은 당신이 더 이상 단순히 사용 <ul/> 으로 포함하는 블록,그리고 그것을 국경을 대신 합니다.

Answer 2

나는 당신에게 진짜 답변을 줄 수는 없지만 아무도 응답하지 않았기 때문에 ... 나는 Firebug (Firefox 3.01)에서 그것을 통과하고 CSS 스타일을 변경했을 때 #rounds li 다른 것으로, 인라인으로 말한 다음 인라인 테이블로 돌아 가면 레이아웃이 수정되었습니다. 따라서 CSS 규칙이 괜찮은 것처럼 보이며 문제는 추가 목록 항목이 JavaScript를 통해 삽입된다는 사실과 관련이 있습니다. 또한 jQuery를 제거하고 W3C DOM 스크립트를 삽입하여 같은 일을하고 충분히 같은 문제를 확인함으로써 확인했습니다.

JavaScript를 통해 물건을 삽입 할 때 페이지가 올바르게 반영되지 않는 Firefox (및 Opera, I 'm Impose)에서 버그를 찾았는지 궁금합니다.

Answer 3

당신은 넣는 것 같습니다 inline-table 내부 a table, 그리고 table-cell내부 table 어떤 것도없이 table-row. 유효하지 않으므로 임의의 브라우저 동작이 발생할 수 있습니다.

어쨌든 display: table* 제대로 지원되지 않습니다 (특히 IE). 오늘 테이블 레이아웃을 원한다면 실제 테이블을 고수하는 것이 가장 좋습니다. 무엇을 달성하려고하는지 잘 모르겠습니다. Xanthir가 제안한 것처럼 간단한 중심을 달성하는 더 간단한 방법이 있습니다.