html+css 크로스 브라우징 도움 요청 드립니다.
관련링크
본문
html 과 css로 짜집기해서 홈페이지 상단영역을 만들어 보고 있는데요..
굴러다니는 소스 주어다가 짜집기하고 있는데다 웹표준은 잘 모르기에
크로스브라우징에 매우 취약한 상태입니다. 제가 윈도8.1을 사용하다보니
IE8에서 미처 테스트를 못해봤는데.. 우연히 얘기를 듣고 원격으로 확인해보니
난장판이더군요.ㅎ;;;
IE11/파폭/크롬 정도에서만 확인해봤습니다. 그것도 약간씩 달리보이는 부분은
있는데.. IE8에선 차마 눈뜨고 볼 수 없을 정도였습니다.
html문서에 css까지 담았기 때문에 한 페이지에서 모든 소스 확인이 가능한 상태입니다.
img폴더만 하나 따로 있구요.. 그냥 찌질한 실력에 짜집기만 한 정도로 소스는 너덜너덜 합니다.;
혹시 도움 좀 주실 분 계신지요..ㅠ;ㅠ
답변 3
아.. 중요한걸 잊고있었네요.. 감사합니다.
답변 주신 것들 중 css는 실제 적용을 하지 않게 되어서(적용시 오히려 맞추기 까다로워져서요..)
해결에 가장 큰 영향을 주신 DTD선언 에 대한 답변을 채택했습니다.^^;
퍼블리싱이란 것이 좀 많이 난해한 부분이 많죠.
검색을 통하여 나온 자료들을 사용하다보면 이전 브라우져 대응에만 대해서 설명해 둔 것들과
현재 브라우져만 지원하는 것들과 모두 대응 가능한 것들이 뒤석혀 있습니니다.
결론은 많이 해보셔야 됩니다 .. ^^
IE와 크롬에서 너무 차이가 많이 나 뭘 표현하고자 하시는지 모를 정도입니다. ㅎ
대략 보아 크롬에서 처럼 보일려 하시는 모양인데
IE10에서 너무 차이나게 보입니다.
제작시 IE와 크롬을 커 두고 한줄 한줄 테스트 해 가며 제작하셔야 할 듯 하군요.
IE10에서도 그런가요 ㅎ; 가능한 하위버전에서 작업했어야 했는데..에고..
혹시 온라인에서 브라우징 테스트를 할 수 있는 서비스는 없을까요..
익스나 크롬이나 익스더라도 버전에 따라서 디폴트값이 조금씩 달라요
그래서 모든 디폴트값을 동일하게 맞추는 css를 기본적으로 넣고 하셔야 합니다.
/* 요소(element) 여백 초기화 */
html, body,
div, span,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
blockquote, p, address, pre, cite,
form, fieldset, input, textarea, select,
table, th, td, img {
margin:0;
padding:0;
}
/* 제목요소 */
h1, h2, h3, h4, h5, h6 {
font-size:100%;
/* font-weight:normal; */
}
/* 테두리 없애기 */
fieldset, img, abbr,acronym { border:0 none; }
/* 목록 */
ol, ul { list-style:none; }
/* 테이블 - 마크업에 'cellspacing="0"' 지정 */
table {
/* border-collapse: separate;
border-spacing:0; */
/* border:0 none; */
}
caption, th, td {
/* text-align:left;
font-weight: normal; */
/* border:0; */
}
/* 텍스트 관련 요소 초기화 */
address, caption, em, cite {
font-weight:normal;
font-style:normal;
}
ins { text-decoration:none; }
del { text-decoration:line-through; }
/* 인용문 */
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote,q { quotes:"" ""; }
/* 수평선*/
hr { display:none; }
/* 숨김 요소 */
legend, #header h2, #slogan h2, #footer h2 {
position:absolute;
overflow:hidden;
width:1px;
height:1px;
font-size:0;
line-height:0;
}
/* body 스타일 */
body {
color:#000;
font-size:75%;
line-height:1.2;
font-family : 굴림, 'Gulim' ; font-size:15px;
}
/* 링크 */
a, a:link {
color:#666;
text-decoration:none;
}
a:visited {
color:#666;
text-decoration:none;
}
a:hover {
color:#666;
text-decoration:underline;
}
a:focus {
color:#666;
text-decoration:underline;
}
a:active {
color:#666;
text-decoration:none;
}
/* 이미지, 폼관련 요소 */
img {
vertical-align:top;
}
label, select, input, textarea {
vertical-align:middle;
}
/* -------------------------------------------------- */
이걸
완전 감사합니다. 참고해서 다시 해보겠습니다.~
아....ㅠㅠ 죄송합니다. 이것도 엄청 중요했네요.. 온라인으로 브라우징 테스트를 해봐서 뭔가 착오가 있었네요.
온라인 크로스브라우징 테스트 서비스도 정확한게 아니네요..
실제 지인 컴퓨터 원격으로 한 번 더 확인해 봤더니... 알려주신 소스를 넣은 후에야.. 전체 적으로
동일하게 나타나기 시작했네요..ㅠㅠ 죄송해요