Mozilla 한국 커뮤니티

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Example</title>
    <style>
      body {margin:0em 0em 0em 0em}
      pre { font-family: "Courier New", monospace;
      	padding: 1em 10em 0em 0em;
      	margin: 0em 0em 0.2em 3em;
      	background-color: #efeff5;
      	border: 1px solid #cfcfcf;
      	white-space: pre;
      }
    </style>
  </head>
  <body>
  	<pre><content:encoded><![CDATA[<p>What a <em>beautiful</em> day!</p>]]></content:encoded></pre>
  </body>
</html>

소스는 위와 같습니다.
창을 실제크기보다 작게 띄웠을때 IE에서 볼때 테두리의 우측부분이 수평스크롤바를 우측으로 움직이면 따라서 움직여서 우측의 여백을 메꿔줍니다.
FF에서 볼때 우측의 여백을 못메꿔줍니다.

우측의 여백을 메꾸지 않는게 맞는건지요?

이미지를 올리고 싶지만 업로드가 안되네요. 아쉽지만 이해부탁합니다.

맞다 틀리다를 논할 수 있는 문제는 아닌것 같습니다. 스펙에 나와있지 않으니까요.

Gecko 계열의 브라우져는 하위 엘리먼트의 width 가 상위 엘리먼트의 width 를 넘어도 상위 엘리먼트의 width 를 변경하지 않습니다. 하지만 IE 의 trident 엔진은 상위 엘리먼트의 width 를 하위 엘리먼트를 포함 할 수 있을 정도로 변경합니다.

이경우 pre 의 width 는 상위 엘리먼트인 body 엘리먼트의 width 를 따르게 되는데 body 엘리먼트의 default width 는 100% 입니다. 그래서 pre 엘리먼트도(width 가 지정이 되어 있지 않으므로) 100% 를 넘지 못하고 바탕색이 끝까지 채워지지 않는 것입니다. pre 엘리먼트 안의 inline 엘리먼트가 pre 의 white-space 속성때문에 pre 엘리먼트를 넘어가게 되는 것이지요.

스펙에 대한 해석이 다른 경우인 것 같습니다.
IE 의 경우 width 를 자동으로 바꿔주니까 편할 수도 있지만 layout 의 경우 layout 이 깨질 수도 있죠.
Firefox 의 경우 이렇게 좀 이상하게? 나오는 경우도 있지만 사용자가 지정한 속성을 충실히 재현하고 있다고 할 수 있죠. (융통성이 없다고 할 수 있으려나...^^)

저는 이 문제 때문에 width 를 지정을 해주고 overflow: auto 속성을 사용합니다. ^^

Mozilla 한국 커뮤니티

어떤것이 옳은지

어떤것이 옳은지