vip10-1216 작업

질문 1: CSS hack이란?
공급업체별 탐색기 또는 브라우저의 버전에 따라 CSS에 대한 지원 해석이 다르기 때문에 서로 다른 브라우저의 환경에서 일치하지 않는 페이지 표시 효과가 나타난다.통일된 페이지 효과를 얻기 위해서는 서로 다른 브라우저나 버전에 대해 특정한 CSS 스타일을 써야 한다.css Hack은 크게 세 가지 표현 형식이 있는데 그것이 바로 css 속성 접두사, 선택기 접두사, 그리고 IE 조건 주석법이다. (HTML 헤더 인용if IE)

속성 접두사법(클래스 내부 Hcak), 예를 들어 IE6는 밑줄''와 별표''를 식별할 수 있지만 IE7은 별표''를 식별할 수 있지만 밑줄''를 식별할 수 없다. IE6-10은 모두'\9'을 식별할 수 있지만 Firefox는 앞에서 말한 세 가지를 모두 식별하지 못한다

선택기 접두사법은 CSS 선택기 전에 특정 브라우저만 식별할 수 있는hack을 추가하는 것을 의미한다.*html: * 접두사는 IE6에만 적용*+html: *+ 접두사는 IE7에만 적용@media \0screen{body{background: red;}}: IE8에만 적용

IE 조건 주석법(즉 HTML 조건 주석 Hack): 모든 IE(참고: IE10+는 조건 주석을 지원하지 않음): IE 브라우저에 표시되는 내용.IE6 및 다음 버전의 경우: IE6에만 표시됩니다.`이러한 Hack은 CSS뿐만 아니라 판단문에 적힌 모든 코드에도 적용됩니다.

문제2: 브라우저 호환성에 대한 생각

하실래요

제품의 각도(제품의 시청자, 시청자의 브라우저 비율, 효과가 제한적이거나 기본 기능이 우선적임)

원가의 측면

브라우저에 지원되는 효과 수준

어떻게

호환 수요에 따라 기술 프레임워크/라이브러리(jquery)

선택

호환 수요에 따라 호환 도구를 선택(html5shiv.js,respond.js,css reset,normalize.css,Modernizr)

서로 다른 브라우저의 버그에 따라 조건 설명, csshack, js 능력 검사 수정을 합니다.

질문 3: 5가지 이상의 브라우저 호환 처리 세부 사항 열거

margin은 IE6에서 배로 늘었고 원소에 부동을 설정한 동시에 margin-left 또는margin-right도 설정하면 margin 값은 배로 높아졌다.어떻게 해결:div에 display：inline

더하기

가장 작은 줄 높이는 i67에서 10px 높이보다 작은 라벨을 설정하면 브라우저의 높이가 자신이 설정한 높이를 초과합니다.해결 방법:

{
min-heith:10px;
height:auto !important;
height:200px;
overflow:visible;
}

IE6, IE7 부동 제거*zoom1 bfc 효과

.clearfix:after{
  content: ' ';
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1；
}

텍스트와 텍스트 입력 상자를 정렬하는 브라우저에 따라 텍스트와 텍스트 입력 상자의 높이가 일치하지 않는 오류가 발생합니다.해결 방법: vertical-align:middle

CSS 투명 문제 ie9 이하 opacity가 잘못되었습니다. fliter: alpha(opacity=50)로 해결

다음 도구/명사는 무엇입니까?

조건 주석 조건 주석(conditional comment)은 HTML 소스에서 Microsoft Internet Explorer에 의해 조건적으로 해석된 문장입니다.조건 주석은 Internet Explorer에 코드를 제공하고 숨기는 데 사용될 수 있습니다.

IE Hack은 IE 브라우저만 해석할 수 있는 코드를 특수한 기호나 방식으로 쓴다. CSS 속성 접두사, 선택기 접두사, IE 조건 주석법

이 있다.

js능력검측은 JS의 문법으로 브라우저가 지원하는 속성을 검측하여 효과를 나타낼 수 있음

html5shiv.js는 IE9 다음 버전의 브라우저가 HTML5의 새 탭을 인식하지 못하고 CSS가 작동하지 않는 문제를 해결하는 데 사용됩니다.

respond.js는 css3 Media Query를 지원하지 않는 브라우저로 하여금 IE6-IE8 등 다른 브라우저에서 조회를 지원하도록 합니다.

normalize.css Normalize.css는 아주 작은 CSS 파일이지만 기본 HTML 요소 스타일에서 브라우저 간의 높은 일치성을 제공합니다.기존 CSS reset에 비해 Normalize.css는 현대적이고 HTML5를 위한 양질의 대체 방안이다.

css reset은 탭 스타일을 재정의하여 브라우저의 CSS 기본 속성

을 덮어씁니다.

Modernizr Modernizr는 사용자 브라우저의 HTML5와 CSS3 특성을 검사하는 JavaScript 라이브러리입니다.

PostCSS PostCSS는 JS 플러그인으로 스타일시트를 변환하는 도구입니다.이 플러그인들은 당신의 CSS, 지원 변수, 혼합, css3의 새로운 기능 문법, 줄 그림 등을 검사할 수 있습니다.