Crowss Browse
what
정의: 내가 만든 웹페이지가 모든 브라우저에서 의도한 화면모양을 유지하면서 나오는 것.
WHY
원인:
브라우저별로 랜더링해주는 '레이아웃 엔진'이 다름
엔진의 종류
Trident(트라이던트): 마이크로 소프트에서 만듦. IE에서 사용. 버전 8부터는 표준을 많이 따름.
Gecko(게코): 모질라재단에서 만듦. 파이어폭스(firefox)에서 사용.
Webkit(웹킷): 애플에서 만듦. 사파리에서 사용. ios, 안드로이드 기본 브라우저에서 사용. 크롬에서도 사용되었음.
Presto(프레스토): 오페라에서 만듦. 오페라에서 사용. 오페라 버전 15이상부터 이엔진을 사용하지 않음.
Blink(블링크): 구글에서 만듦. 웹킷에서 비롯되었지만, 구글이 주도해서 만듦. 오페라에서 이 엔진을 사용.
듀얼엔진: 위의 엔진들을 혼용해서 사용.
HOW
해결방안:
- css초기화: 브라우저별 차이나는 css 초기화 ex) margin, padding
html, body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, table, tr, th, td 등등
{
margin: 0;
padding: 0;
}
ol,ul {
list-style: none;
}
img {
border: none;
}
- 상속받는 css는 초기화 하지 않기: ex) font
- IE관련 조절: Hack 편법적인 방법으로 버전별 특정 css명을 주기
div {
color: red;
*color: blue; /* IE7이하 용 */
_color : green; /* IE6 용 */
}
- IE용 주석사용(Conditional comments)
<!--[if IE 7]>
<link href="ie7.css" type="text/css" rel="stylesheet" />
<![endif]-->
- 메타를 이용한 IE 모드 (신규 사이트라면 사용하지 않을것)
<meta http-equiv="X-UA-Compatible" content="IE=7" />
css 초기화관련 오픈 stack
'코드(프로그램언어) > 웹일반상식' 카테고리의 다른 글
| 웹개발일반_기획자, 디자이너 없이 웹개발한다면? (0) | 2017.12.14 |
|---|
