모바일 페이지 크로스 브라우징 급질문해봅니다.
한울
크로스 브라우징 대상은 아이폰(4.0-), 갤럭시 s2(진저브레드,아이스크림), 갤럭시 노트우선 간단하게코드에 대해 알려드리자면
div class=wrap header hgrouph1img src=h1_mainTop.png width=288 alt=/h1/hgroup article class=event ul liimg src=txt_application1.png width=213 alt=응모가능1/li liimg src=txt_application1.png width=213 alt=응모가능2/li liimg src=txt_application1.png width=213 alt=응모가능3/li /ul /article /header/div
.wrap{width:100%}header{width:100%;height:257px;}header hgroup{width:320px;margin:0 auto 18px auto}header h1{padding-left:13px}header .event{width:320px;margin:0 auto 18px auto;padding-left:18px;}
이렇게 줬는데 아이폰에서는 가로모드, 세로모드에서는 모두 잘나옵니다.하지만 안드로이드 기계에서 아이스크림도 가로 세로 모두 잘나오지만,진저브레드에서 hgroup에 있는 h1이미지가 가로모드에서 좌측으로 정렬되어서 나오더군요.해결좀 도와주세요
-
소미
수다님 마지막 말씀하신거 display:block를 추가하니 잘나옵니다. header, hgroup모두 블록인거는 알고있었는데 막상 실무에서는 안 맞는게 있네요.
아무래도 데스크탑 브라우저에서는 html5태그 렌더링을 제대로 해주는 편이지만 모바일브라우저 특히 안드로이드의 구식버전에서는 html5태그의 렌더링을 제대로 못해줘서 생기는 문제인것 같습니다.
테스트기기가 없다 보니 여러방법(text-align, position, 태그수정)을 못써보고 원칙 -
핫레드
header, hgroup 모두 블록엘리먼트인거 확인하고 margin:0 auto를 준거에요. 답변 정말 고맙습니다.
-
사랑은아픔
기억은 잘 안나는데 hgroup이 인라인태그일지도 모르겠네요.
header hgroup에 display:block 또는 inline-block도 추가해보세요. -
라온제나
답변은고맙습니다. 하지만 말씀하신것도 조금 이상한게 밑에있는 event클래스에 있는 것은 똑같이 margin:0 auto 로 값을 줬는데 가운데 정렬이 제대로 되더군요 똑같이 img가 들어있는데도 말이에요..
-
개럭시
진저브레드에서는 width 와 margin:0 auto 만으로 가운데 정렬이 되지 않나 보네요.
아래와 같은 방법을 사용해 보세요.
.wrap{width:100%;text-align:center;}
header{text-align:left;} -
은송이
소스는 자세한 alt값만을 제외하고 복사해서 붙인거구요.
header hgroup{width:320px;margin:0 auto 18px auto} 이걸로 가운데 정렬을 했는데 hgroup 안에있는 h1만 좌측 정렬이 되어 나온다는게 이해가 안가요. 수다님이 말씀하신 내용은 hgroup내에서 좌측정렬을 얘기하시는 거겠죠!! -
소라
해당 소스의 내용이 부족한건지 어떤건지는 잘 모르겠으나,
기본적으로 좌측 정렬되어서 나오는게 맞습니다.
첨부해주신 소스는 기본 좌측 정렬 상태에서 아래 내용밖에 준것이 없습니다.
header h1{padding-left:13px}