크롬이이 테이블 셀에 너비 0을주는 이유는 무엇입니까?

Question

나는이 문제가 왜 이런 일이 일어 났는지 알기 위해이 질문을 할 것이라고 생각했다. 내가 사용하고

크롬의 버전은 다음과 같습니다 버전을 30.0.1599.69 m 여기

(이 게시물의 당시 최신 버전)입니다 보여줍니다 바이올린 :

http://jsfiddle.net/Dz4Q5/

HTML

<table id="myTable"> 
<tbody> 
    <tr> 
     <td id="testWidth"> 
      This should have some width 
     </td> 
    </tr> 
</tbody> 
</table> 

CSS

,236,298 438,963,210

자바 스크립트

var width = document.getElementById('testWidth').offsetWidth; 
document.getElementById('width').innerHTML = width + 'px'; 

페이지 일부 텍스트가 포함 된 파란색 상자가 표시됩니다. 이 파란색 상자에는 공간이 필요하기 때문에 분명히 약간의 너비가 있습니다. 그러나 CSS는 너비를 0으로 지정했습니다. 실제로는 제안 사항 일 뿐이지 만 테이블 셀은 실제로 그것을 밀어 붙인 일부 자식으로부터 너비를 가져옵니다.

든 테이블 셀의 일부의 offsetWidth 영이 아닌 값이 표 셀의 실제 오프셋 폭을 줄 것이다 0

모든 다른 브라우저라고 말하고 스크립트. Chrome v29 이하에서 테스트하는 경우 포함

Chrome v30에만이 문제가있는 것으로 보입니다.

누구나 여기서 무슨 일이 벌어지고 있는지 알 수 있습니까? 아니면 크롬 개발자가 버그를 수정하기를 기다리는 동안 앉아 있어야합니까?

아마 내가 의존하지 않아야 할 offsetWidth에 의존하고 있습니까?

이것은 분명히 W3C 사양을 위반 한 것처럼 보입니다. 아마도 내가 틀렸을 것입니다.

또한 크롬에서 텍스트를 전혀 감싸지 않는 것처럼 보입니다.하지만 CSS에서 너비를 0으로 지정했기 때문에 다른 모든 브라우저는 텍스트를 줄 바꿈합니다. 가능한 경우 너비를 최소화해야합니다.

참고 : #testWidth 셀의 너비를 변경하면 오프셋이 너비로 변경됩니다. 즉, 0 대신 10px라고 말하면 출력은 10이됩니다. 따라서 offsetWidth는 CSS에서 어떤 너비를 넣었는데, 틀린 ... 바로 ??

Answer 1

CSS에서 width: 0;을 제거하면이 버그를 방지 할 수 있으며 max-width 또는 min-width로 변경할 수도 있습니다.

http://jsfiddle.net/Dz4Q5/4/

Answer 2

당신은 CSS에서 해당 ID의 폭을 설정합니다. CSS에서 width: 0;을 삭제하십시오.

그러면 CSS는 다음과 같이 나타나야하며 문제는 사라집니다.

#myTable { 
    background-color:#4679bd 
} 
#testWidth { 
    padding: 0; 
}