Whitespace debugging in DevTools in action

구글 크롬 위주로 사용하다가 파이어폭스로 옮겨타보려고 시도중입니다. 여느때와 다름없이 퍼블리싱을 하던 중 이상한 현상이 나타났습니다. 무슨 짓을 해도 레이아웃이 틀어지는 기이한 상황(?)이었는데, 도대체 무슨 상황인지 파악이 안되서 애꿎은 css만 계속 수정했습니다만 엉뚱하게도 원인은 공백문자 – whitespace text node 문제였습니다.

크롬과 달리 파이어폭스에서는 html 태그에서 한칸 띄어쓰기를 한것 까지 잡아내서 기어코 공백으로 표현하는 과잉 친절을 베푸는데, 바로 이게 원인이었습니다.

<li>
    내용
</li> <!-- 이렇게 줄바꿈이 되어있으면 공백문자로 인식합니다 -->
<li>
    내용
</li>

<li>
    내용
</li><li> <!-- 이렇게 붙어있어야 공백이 없다고 인식합니다 -->
    내용
</li>

위와 같은 문제(?)때문에 약간의 공간을 표시하면서 결과적으로 전체적인 레이아웃이 틀어졌던 것입니다. 보기 좋게 줄바꿈을 한 덕분에 삽질을 하게 됐네요. 일단 이렇게 또 삽질하면서 한 수 배웠습니다.

 

[contentcards url=”https://blog.nightly.mozilla.org/2016/10/17/devtools-now-display-white-space-text-nodes-in-the-dom-inspector/” target=”_blank”]