근데 익스 5를 쓰는 사람도 있나요 ??

제가 코딩하면서 느낀건데 .. 코딩한데 익스 7로 코딩을 하시면 안되고 크로스 브라우징 하실려면
익스 6  - 오페라 - 파이어폭스
를 기준으로 하셔야 할겁니다.

즉 저렇게만 맞추어도 익스 7/8은 그냥 맞야 들어 가더군요 .. 익스 7에 맞추면 익스 6에 깨지는곳이
상당하고 .. ^^;

ie5도 있기는 하지만 비율이 낮아요.
대세는 ie6이죠 (xp에 들어 있으니까요)
ie7은 은근히 불편하고 ie8은 빠르지만, 가끔 문제가 있어요.

무조건 ie6에 맞추면 문제 없어요. ㅎㅎ

보너스 하나 더 사용자의 화면크기도 영향을 받습니다. div 를 쓸 경우는 말이지요.
요즘 보니 대개 1280 혹은 1024 크기에 맞추어 사이트를 제작하는데 이게 1500 이 넘어가는 모니터로 보면 웃긴 상황이 연출되는 경우가 많습니다. div 에 스크립트를 쓰거나 배경이미지를 까는 경우가 대표적이지요.
아직까지는 table을 적당히 혼용해야 어느 정도 커버가 되는 것 같습니다.
핵을 사용하기도 하고 각 브라우저별로 css 를 따로 제작하여 접속자에 따라 조정하는 소스를 보긴 했는데 이게 왕노가다입니다. 페이지 하나야 큰 문제가 아니지만 적게는 수 십 개에서 많게는 수 백 개에 이르는 페이지를 모두 커버하려면...
포털 같이 각 분야별 전문가들이 자기 일만 하는 경우야 커버가 가능하겠지만 소규모 제작자들은 엄두조차 내기 어려운 일이지요.
웹표준에 맞추면 익스에서는 깨지는 것이 다반사이고 익스에 맞추면 파폭이나 크롬에서 볼썽사나운 자태를 뽐내니 어느 장단에 춤을 춰야 할 지 난감할 때가 많습니다.(디자인이 많이 들어가는 사이트 제작시 겪는 고충입니다.)

결론?
사용자들이 표준에 가까운 브라우저를 사용해야 하고 브라우저 개발사들 역시 표준에 맞추어 지원해주어야 가능한 이야기 같습니다. 그 이전에는 왕노가다 아니면 그저 큰 무리없이 보이고 결제 사이트라면 결제 잘 되고 보안에 큰 지장 없으면 그냥저냥 버텨야 하는 상황이지요.

마소에서나온 expression 스튜디오 보셨나요?
아직 써보지는 않았지만 오버레이 모드보니 쥑이던데요... ^^;

쓰고 있는데, 별로 입니다. 돈 내구 샀으면 기절했을꺼에요. ㅎㅎ

드림위버 쓰세용

저랑 비슷한 생각이시군요...

크로스라 특별히 신경쓰는건 없는데 dtd 선언해주니, px 단위까지신경써야 하더군요.

근데 레이아웃부분에서는 div 잘못 다루면 크로스잘 안되는걸로 알고있습니다.

우찌됐든....브라우져들 때문에, 우리들이 죽어나는건 맞죠. 무슨 개도 아니고,,

솔직히 웹표준이란게... 10년전에도 있었죠. 근데 그때 웹표준과 지금과 같을까요? 궁금합니다.

바뀌면 따라서 바꿔줘야되고...전... 선언?? 개선언으로 이해합니다.

요즘 넷북 사용자가 많다고 하니까 화면폭은 넷북 기준으로 해야 할 듯...

css framework들 쓰면 된다고 하던데... 전 안써봐서 정확히는 모르겠네요

제가 보기엔 디자인의 개념부터가 문제 아닌가 싶네요. 구태여 1px단위까지 맞추지 않아도 되는 그런 디자인으로 애초에 디자인을 한다면 크게 문제가 안 될듯도 싶은데요. 

기존의 페이지디자인 습관도 크로스 브라우징에 걸림돌이 되지 않나 하는 생각을 해 봅니다.

익스7까지는 MS에서 나온 비표준 브라우져라고 알고있습니다.
기본을 익스8과 파이어폭스로 잡고 제작하셔야 크로스브라우징하는데 도움되실꺼예요

몇일전에 할거없어서 만들어놓은 프레임워크인데
오페라,IE5.5이하 제외하고는 글자줄간격까지 모두 다 마쳐놓은건데 참고해보세요.

제팁인데.
width값에 padding-left,right 값을 되도록 주면 안되고
height값엔 padding-top,bottom값을 주면 안됩니다.
이 경우 내부 엘리먼트를 하나더 만들어서 margin 값을 넣주는게 크로스브라우징이더 수월합니다.

@charset "UTF-8";
/* Author 김현석 */

/*********Common***********/
ul{margin:0;padding:0;}
html{font-size:0.8em;font-family:"굴림",Arial;color:#333333;}
ul,ol{list-style:none;}
table,td,ul,ol,dl,dt,dd,p,form,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
table{border-collapse:collapse}
fieldset{border:none 0;}/*XHTML에선 사용안함*/
/*줄간격 통일 IE6이상, Opera제외*/
body{margin:0;padding:0;line-height:1.3em;*line-height:1.25em;}
body, x:-moz-any-link, x:default {line-height:1.25em;} /* Firefox 3 Fix */

h1{font-size:1.7em;}
h2{font-size:1.4em;}
h3{font-size:1.2em;}
h4{font-size:0.95em;}
h5{font-size:0.9em;}
h6{font-size:0.85em;}
div{height:1%;/*has layout*/}
em{font-size:0.85em;font-family:"굴림";font-style:normal;}
cite{display:block;margin-top:10px;font-size:0.85em;font-family:"굴림";font-style:normal;}
img{border:none 0;}
label {cursor:pointer;cursor:hand;/*IE5~5.5*/}
hr{display:none;position:absolute;}
/* Special selector*/
.hidden{display:none;}
.clear{clear:both;}
.fclear:after{content:"";clear:both;display:block;*height:0;}
.fr{float:right;}
.fl{float:left;}
.cRED{}
.cBLUE{}
.alt{text-indent:-2000px;}/*IR*/
.tLeft{text-align:left;}
.tRight{text-align:right;}
.bold{font-weight:bold;}
.png24{_behavior:url(../js/iepngfix.htc);}/*IE PNG FIX*/
/* Skip to content */
a#skip_to_content{display:block;position:absolute:top:0;left:0;width:0;height:0;line-height:0;overflow:hidden;}
a#skip_to_content:focus{display:block;position:absolute;top:10px;left:10px;overflow:visible;width:auto;height:auto;line-height:120%;padding:8px;border:solid 2px #666666;background:#ffffff;z-index:9999;font:0.9em 굴림,Gulim;}
a:line{text-decoration:none;}
a:hover{text-decoration:underline;}
a:active{text-decoration:underline;}
a:focus{text-decoration:underline;}
a:visited{text-decoration:none;}


/*********Layout***********/
body{text-align:center;}
#wrap{position:relative;text-align:left;}
#header{position:relative;*zoom:1}
.gnb{font-size:0.9em;border:solid 1px #ddd;margin:4px 0;padding:0 4px;}
.gnb li{display:inline-block;*display:inline;*zoom:1;padding:8px 0;margin-right:10px;}/* Cross-Browser Inline-Block */
#container{position:relative;background:#f5f5f5;*zoom:1;}
#container:after{content:"";clear:both;display:block;*height:0;}/* 가상선택자로 Clear */
.content {float:right;background:url(../bg_1.png) repeat-x;}
.lnb {float:left; background:#00f;}
#footer{position:relative;background:green;margin:4px 0;*zoom:1;}
#footer:after{content:"";clear:both;display:block;*height:0;}
/* Layout width */
.fixed #wrap{width:940px;margin-left:auto;margin-right:auto;}
.fixed #wrap .content {width:680px;}
.fixed #wrap .lnb {width:256px;}
/* Layout Align */
.aLeft #wrap{margin-left:0;}
.aRight #wrap{margin-right:0;}
/*********Layout Element Reset********/
/*레이아웃 다시쓰기는 요기*/
html{}
body{}


/****** Layout Elements*******/


/*********SubTitle**********/
/* <h3><span class="alt">TEXT SUBTITLE</span></h3> */
h3.subtitle01{background:url() no-repeat;width:;height:;}/**/
h3.subtitle02{background:url() no-repeat;width:;height:;}/**/
h3.subtitle03{background:url() no-repeat;width:;height:;}/**/
h3.subtitle04{background:url() no-repeat;width:;height:;}/**/
h3.subtitle05{background:url() no-repeat;width:;height:;}/**/
h3.subtitle06{background:url() no-repeat;width:;height:;}/**/
h3.subtitle07{background:url() no-repeat;width:;height:;}/**/
h3.subtitle08{background:url() no-repeat;width:;height:;}/**/
h3.subtitle09{background:url() no-repeat;width:;height:;}/**/
h3.subtitle10{background:url() no-repeat;width:;height:;}/**/
h3.subtitle11{background:url() no-repeat;width:;height:;}/**/
h3.subtitle12{background:url() no-repeat;width:;height:;}/**/

/**********IR Button********/
/* 대체 텍스트가 있는 이미지 */
span.img_button{position:relative;display:inline-block;}
span.img_button em{font:12px 굴림,Gulim;position:absolute;display:block;z-index:-1;top:0px;left:0;font-style:normal;margin-top:3px;*margin-top:2px;}
span.img_button em.h1{font:bold 24px 굴림,Gumil;}
span.img_button em.h2{font:bold 22px 굴림,Gulim;}
span.img_button em.h3{font:20px 굴림,Gulim;}
span.img_button em.h4{font:18px 굴림,Gulim;}
span.img_button em.h5{font:12px 굴림,Gulim}
span.img_button em.h6{font:11px 돋움,Dotum;}
span.img_button a{display:inline-block;overflow:hidden;background-repeat:no-repeat;}
/* 아래 사용자 버튼의 이미지와 크기를 지정해서 추가하세요 */
span.img_button a.img1{background:url(naver.jpg);width:141px;height:27px;}

/******** Table ***********/
table.tbl01{}
table.tbl01 thead{}
table.tbl01 tbody{}
table.tbl01 tfoot{}
table.tbl01 th{}
table.tbl01 td{}

/******* List ********/

컥.. 전 xp에 익스8 쓰는데..

금융권 문제 없던데요.. ^^

저도 크로스브라우징때문에.. 몇시간씩 끙끙댈때가 있었네요..ㅠ