2011-01-17 2 views
3

그래서, this screenshot of a page I'm working on in Chrome Developer Tools 체크 아웃 :CSS 미스테리 : CSS 규칙없이 너비가 0px로 설정되어 있습니까?

http://www.madingley.org/uploaded/devtools.png

'일치하는 CSS 규칙'에있는 최고 규칙은 요소의 폭이 160 픽셀되어야한다고 제안한다.

그러나 '계산 스타일'의 너비는 실제로 0px입니다.

'0px'를 클릭하면 너비가 160px가되어야 함을 나타내는 규칙이 다시 표시됩니다. 그러나 그렇지 않습니다.

무슨 일 이니? Chrome 개발자 도구에서 볼 수없는 너비를 0px로 설정하는 이유는 무엇입니까?

어떻게 디버깅 할 수 있습니까?

+1

가능성은 우리가 오히려 사진보다 데모 링크, 실제 게시 된 코드를 가질 수를 표시하는 경우에도 폭, 높이 값을 무시하게 display: inline 속성이 있습니다 .. ? –

답변

8

링크는 display: inline;을 사용합니다. display: inline-block; 또는 display: block; (IE6-7 지원이 필요한 경우) 중 하나를 원합니다.

spec on the display property을 읽을 수 있습니다.

4

이것은 display: inline 요소이므로 너비를 설정할 수 없습니다. 시도하십시오 display: inline-block.

+0

감사합니다. 이런 종류의 일을 스스로 해결할 수 있도록 어떤 도구를 사용할 수 있습니까? – AP257

+0

흠, 실제로는 [google] (http://google.com/)이 나를 대신 할 길입니다. 모든 사양을 읽을 수는 있지만 시간이 많이 걸립니다. – orlp

+0

@ nightcracker, @ AP257, [CSS Spec] (http://www.w3.org/TR/CSS21/)은 읽기가 어렵지 않습니다. – zzzzBov

1

그것은 요소들이 !important