작업하다가, 디자인이 너무 틀어져서 어디에서 문제가 발생했나 찾아보던중, div 태그를 렌더링 하는 방식이 다르다는 것을 발견했다.
다른 태그들도 조금씩 렌더링 방식이 틀려서 IE 에 맞춰서 작업을 하면 크롬(Chrome) 에서는 디자인이 다르게 보이는 경우가 종종 발생하는데..
좀더 오밀조밀하고 유동적인 화면을 구성하기 위해서, 몇년전부터 div 를 이용한 화면구성이 많아진것 같은데,
다른 태그는 둘째치고라도, div 태그의 경우에는 상당히 다른 방식으로 렌더링이 되는것 같다.
위의 화면은, 같은 소스로 만들어진 html 문서를, IE6 와 크롬(Chrome) 에서 실행시켰을때, 어떻게 틀리게 렌더링 되는지를 볼 수 있는 화면이다.
설명을 해보자면,
IE6 의 경우에는, div 태그안에 들어가는 태그에 의해 유기적으로 형성되어 렌더링 된다.
즉, div 태그의 넓이나 높이 보다 그 안의 table 태그의 형태가 틀리면, 그 사이즈에 맞춰서 div 의 크기가 변형된다.
하지만, 크롬11 의 경우에는 div 태그가 그 안쪽의 태그와 독립적으로 렌더링 된다.
그렇기 때문에, 그 안의 table 태그의 넓이나 높이나 외부의 div 태그의 넓이나 높이와 맞지 않을 경우, 예상하지 못한 디자인 틀어짐이 발생할 수 있다.
덧글
2. DOCTYPE을 지정하지 않아서 렌더링을 예상할 수 없습니다. 모든 HTML 문서는 문서 상단에 DOCTYPE을 적어야 합니다. 웹 브라우저는 DOCTYPE에 따라 렌더링을 다르게 합니다. 잘 모르겠다면 <!DOCTYPE html> 이라고 쓰세요.
3. CSS에서 width: 100; 은 허용되지 않습니다. width: 100px; 처럼 단위를 명시해야 합니다. 실제로 크롬이나 파이어폭스 등 표준을 준수하는 브라우저는 표준 모드에서 width: 100; 이라고 쓰면 무시합니다. 표준 모드는 DOCTYPE으로 설정할 수 있습니다.
표준에는 div 태그에 width, height attr은 존재하지 않고 style 만 존재합니다.
랜덤 여신 말씀대로 css 정의해서 style로 지정하시면 될 듯.
http://www.w3schools.com/tags/tag_div.asp