먼저 이글은 http://zine.standardmag.org/200802/20 와 같은 내용임을 알려 드리며 다시한번 테스트 해본 결과입니다.
크로스브라우징으로 인해 시간낭비 및 생각하지 않던 것들때문에 야근을 하는 경우가 종종 발생하죠. 참 안타까운 현실입니다.
알려진 크로스브라우징 팁 가운데 DTD의 선택도 중요한 부분을 차지 하고 있다는건 여러 글들을 통해 접했으리라 생각합니다.
그래서 DTD에 따른 박스크기 변화를 다시한번 테스트해 보았습니다.
테스트 박스는 공통적으로 width = 150px / height = 100px / padding = 30px / border = 3px 값을 주었을때 입니다.
먼저 DTD를 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 로 했을 경우에 결과입니다.
소스는 다음과 같습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> body { margin:30px; } #wrap { width:150px; height:100px; padding:30px; border:3px solid #ccc; font-size:12px; } </style> </head> <body> |
![](http://web.webmini.net/files/attach/images/13859/165/028/bb09c83eb236f84b26f80b0ee41a0f6c.gif)
보시는 바와 같이 파이어폭스를 제외한 IE6 / 7 은 지정한 가로/세로 값으로 보여지며 border 과 padding 값을 포함하고 있는 반면 파이어폭스는 지정한 가로/세로 값에서 border 값과 padding 값이 추가된 사이즈로 박스가 보여집니다.
다음은 DTD 가 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 로 했을 경우 입니다.
소스는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <body> |
![](http://web.webmini.net/files/attach/images/13859/165/028/bbd9fcddc4d27476e06440cb6bf635ab.gif)
이처럼 DTD에 따라 각 브라우저 별로 다르게 보임을 알수 있습니다.
오페라와 사파리(3.1) 역시 파폭과 동일하게 DTD와 관계없이 padding 값과 border 값만큼 지정한 박스보다 커짐을 알수 있었습니다.
![](http://web.webmini.net/files/attach/images/13859/165/028/f335da4ff3a43ec324cbcec65b945519.gif)
![](http://web.webmini.net/files/attach/images/13859/165/028/2580eda95f98d0ac8dc0e8e2cb6a5826.gif)
역시 IE만 혼자 노는걸 알수 있군요.. 참고 되셨으면 좋겠네요..^^
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시
![BEST](/modules/board/skins/xe_webmini/img/common/icon_bestreply.gif)
- 추천수 50개이상
- 추천수 30개이상
- 추천수 20개이상
- 추천수 10개이상
- 추천수 3개이상
![](/modules/board/skins/xe_webmini/img/pc_emot_co.gif)
첫번째 댓글을 남겨주세요!