브라우저 간 TH 모델의 다른 해석

Question

TH 태그의 너비가 해석되는 방식, 특히 패딩이 너비 계산에 포함되는지 여부와 관련하여 브라우저간에 불일치가 있음을 확인했습니다.

테이블 형식의 데이터를 신속하게 생성하고 스타일을 지정하기위한 재사용 가능한 라이브러리를 구축하고 있습니다. 이것은 내가 생성하는 코드를 완전히 제어 할 수 있다는 것을 의미하지만 실제로 문제를 해결하고 특정 인스턴스에 대한 해킹을 찾아야합니다. IE9와 FF의 문제점

TH의

간단한 설명 패딩 + (예상)의 폭의 크기에 기초한다. Chrome 및 Safari 에는 너비가 여백으로 포함되어 바람직하지 않은 결과가 발생합니다.

예를 들어 셀을 16px 너비 + 4px의 여백으로 설정하면 IE9는 셀을 20px 너비로 올바르게 표시합니다. Chrome은 16px 너비로 표시합니다. 여기

는 차이를 보여주는 JS 바이올린입니다 : http://jsfiddle.net/CZnau/

당신은 마지막 셀이 브라우저 사이에 다른 크기가 얼마나 볼 수 있습니다.

참고

• 나는 박스 크기의 알고 기본이 에 경우에도하지는 문제가 해결되지 않는 명시 적으로 box-sizing: content-box 설정, 셀의 폭을 계산 패딩을 포함한다.

• 바이올린은 고정 된 레이아웃 테이블을 보여줍니다. 다른 시나리오에서 올바르게 표시하려면 table-layout: fixed을 사용하고 싶습니다. 특히, 실제 구현에서는 텍스트 오버플로, 배치 관리 및 가변 폭 레이아웃을 사용합니다. 내 테스트에서 고정 레이아웃을 사용하면 내 모든 요구 사항을 훌륭하게 연동시킬 수있는 유일한 방법입니다. 또한 고정 레이아웃 표가 잠재적으로 더 빨리 렌더링됩니다.

• 나는 각 TD에 명시 적으로 폭을 설정하려고했지만,이 문제가 해결되지 않습니다 (아마도 그것은 고정 된 레이아웃 표와 충돌?) 경우

당신이 원하는 더 자세한 내용을 왜 주위에 고정 된 레이아웃 테이블이 필요합니다. table-layout: fixed의 유무에 관계없이이 바이올린을 사용해보십시오. 고정 된 레이아웃을 사용하면 테이블의 크기가 100 %로 정확하게 조정되고 가변 폭 셀을 사용하여 텍스트를 우아하게 자릅니다.

http://jsfiddle.net/6GPmY/

Answer 1

파이어 폭스는 심지어 자신의 오로라 버전에서 아직 box-sizing: content-box;를 지원하지 않습니다.

그때까지 당신은 -moz-box-sizing를 사용할 수 있습니다

th, td { 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 8px; 
} 

jsFiddle Demo