CSS 를 연습 하려 면 먼저 IE 의 세부 분석 을 해결 해 야 한다.

6691 단어 CSSIE세부 분석
더 나 쁜 것 은 IE 디자인 만 을 대상 으로 하 더 라 도 다른 브 라 우 저 를 고려 하지 않 는 다 는 것 이다.IE 모델 은 성격 을 파악 하기 어 려 운 괴물 이 라 고 할 수 있 기 때문에 IE 디자인 만 해도 많은 어려움 을 겪 을 수 있 고 많은 효 과 를 얻 기 어렵 다 는 것 을 알 게 된다.
우 리 는 모두 알다 시 피 XHTML+CSS 의 목 표 는 내용 과 표현 분 리 를 실현 하 는 것 이다.이론 적 으로 특정한 내용 에 대해 우 리 는 CSS 를 통 해 우리 가 원 하 는 표현 형식 을 실현 하거나 세밀 하 게 구조 형식 이 라 고 할 수 있다.현실 은 이 목표 와 어느 정도 차이 가 있 지만 CSS 는 대부분 흔히 볼 수 있 는 구조 수 요 를 만족 시 킬 수 있다 는 것 을 증명 한다.그러나 IE 를 사용한다 면 종 잡 을 수 없 기 때문에 간단 하고 우아 한 CSS 로 IE 가'원 하 는 레이아웃 형식'을 실현 할 수 있 도록 하려 면 불가능 하 다.복잡 하고 번 거 로 운 CSS 만 이 IE 에서 당신 의 수 요 를 만족 시 킬 수 있다.나 는 일찍이 이론 을 언급 한 적 이 있다."한 사람 이 연구 방향 에 관심 이 있 는 지 없 는 지 는 완전히 우연 한 사건 에 의 해 결 정 될 가능성 이 높다.이것 은 마치 사람 이 처음으로 배드민턴 을 치 는 것 과 같다.만약 에 네가 몇 판 을 이 겼 다 면 너 는 흥 미 를 느 낄 것 이다.만약 에 네가 계속 이기 지 못 하면 너 는 흥미 가 없 을 것 이다."IE 는 복잡 하고 번 거 로 운 CSS 가 필요 하 다 는 점 에서 대부분의 입문 자 들 을 뒷걸음질 치 게 하기에 충분 하 다.너 는 늘 요령 이 없다 는 것 을 느 꼈 으 니,너 는 당연히 배 워 나 갈 흥미 가 없 을 것 이다.
예 를 들 어 이 문 제 를 설명 한다.예 를 들 어 IE 에 hasLayout 가 있다 는 것 을 모 르 고 하나의 요소 가 hasLayout 가 그 구조 방식 에 중대 한 영향 을 미 치 는 지 아 닌 지 를 알 기 때문에 CSS 를 가장 간단 한 사고 로 생각 하고 서로 다른 CSS 규칙 간 에 느슨 한 결합 이 있어 야 한다 고 생각 할 것 이다."CSS 는 간단 하고 우아 하 게 설계 되 어야 한다."라 고 생각 할 것 이다.그래,그것 은 확실히 이렇게 설계 되 었 지만 IE 는 이렇게 CSS 를 실현 하 는 것 이 아니다.IE 가 quirks mode 와 standards mode 사이 의 차 이 를 아래 코드 로 증명 합 니 다.
 
Hello
   
Hello

우선,우 리 는 quirks mode 로 결과 가 어떤 지,그리고 한 초보 자가 이러한 결 과 를 보고 CSS 규칙 을 어떻게 이해 하 는 지 보 았 다.quirks mode 에서 우 리 는 배경 이 빨간색 인
는 위의 한 줄 의 텍스트 와 아래 에서 왼쪽으로 움 직 이 는(자 연 스 럽 게 유동 블록 오른쪽 에 있 는 텍스트 포함)를 볼 수 있 습 니 다.여기 서 우 리 는 두 가지 인식 을 세 울 수 있 습 니 다.
  • 용 기 는 내용 이 완전히 포 함 된 것 으로 내용 의 전체 높이 가 용기 보다 클 때 용 기 는 자 연 스 럽 게 스 트 레 칭 되 어 수용 내용 을 확보한다.
  • 유동 블록 도 상기 조건 에서 수용 내용 을 확보 하기 위해 스 트 레 칭 을 요구 한 것 에 속한다.
    • 상기 규칙 은 완전히 잘못된 것 입 니 다.표준 CSS 와 quirks mode 를 이해 하 는 디자이너 는 그의 이 해 를 이렇게 설명 할 것 입 니 다.
  • IE 는 quirks mode 에서 height 를 min-height 로 이해 하기 때문에
    의 높이 는 height 가 지정 한 30px 보다 작 지 않 으 면 된다 고 생각 합 니 다.한편,CSS 기준 에 따 르 면 height 가 30px 로 설정 되 었 을 때 높이 는 반드시 30px 이 고 초과 부분 을 어떻게 처리 하 는 지 는 전문 적 인 CSS 규칙 에 의 해 결정 된다.
  • 에 height 속성 이 설정 되 어 있 기 때문에 IE 에서 이것CSS Zen Garden을 사용 할 수 있 습 니 다.이 로 인해 유동 블록 을 포함 하여 모든 내용 을 포함 해 야 합 니 다.한편,CSS 기준 에 따 르 면 유동 블록 은 완전히 포함 되 지 않 아 도 됩 니 다.clear 속성 이 설 정 된 요 소 를 만 나 지 않 는 한 후속 내용 은 옆으로 이동 하고 피 할 수 있 습 니 다.
    • 자,이 대 비 는 문제 의 심각 성 을 설명 할 수 있 을 것 이 라 고 믿 습 니 다.IE 의 효 과 를 통 해 CSS 를 이해 하면 최종 적 으로 당신 의 이해 와 실제 CSS 의 차이 가 매우 클 것 입 니 다.상세 한 standards mode 와 quirks mode 가 가 져 온 표준 집행 차 이 는 이 글 을 참고 할 수 있 습 니 다.hasLayout
    그리고 분명히 누군가가 나 에 게 doctype 을 통 해 standards mode 를 사용 했다 면 문제 가 없 지 않 겠 느 냐 고 물 어 볼 것 이다.standards mode 는 IE 가 CSS 에 대한 해석 을 합 리 적 으로 할 수 있 지만 일이 그리 간단 하지 않 습 니 다.이 는 실천 을 통 해 천천히 느 낄 수 있 습 니 다.standards mode 에서 CSS 를 디자인 하고 IE/FF/Opera/safari 라 는 4 대 주류 브 라 우 저 에서 일치 하도록 노력 할 수 있 습 니 다.디자인 이 진행 되면 서 쉽 지 않 은 것 을 알 게 될 것 입 니 다.아마도 당신 은 그 중의 작은 문 제 를 해결 하 는 데 시간 을 들 이 고 싶 지 않 을 것 입 니 다.그 중의 일부 브 라 우 저 사용자 들 이 비교적 추 한 구 조 를 보 더 라 도 적어도 위의 예 와 비슷 한 이 치 를 알 게 되 었 습 니 다.서로 다른 브 라 우 저 는 standard mode 에 있어 도 CSS 에 대한 이 해 는 차이 가 있 고 차이 중 하 나 는 정확 할 수 있 습 니 다.심지어 모두 틀 릴 수도 있다.이CSS Quirks mode and strict mode은 많은 브 라 우 저가 CSS 에 지원 하 는 차 이 를 열거 했다.하나의 CSS 는 어떤 브 라 우 저 에서 지원 하지 않 거나 buggy 의 규칙 이 있 기 때문에 서로 다른 브 라 우 저 에서 일치 하 는 것 을 유지 하기 어렵다.
    그 다음 에 IE 의 시장 점유 율 이 가장 큰(특히 입문 급 사용자 중에서)또는 제 고객 이 IE 를 클 라 이언 트 로 지정 한 이상 IE 디자인 CSS 만 사용 하 는 것 이 좋 지 않 습 니까?왜 FF 와 같은 표준 브 라 우 저 에 대해 CSS 를 설계 한 다음 에 IE 를 위해 fix 를 진행 합 니까?IE 의 종 잡 을 수 없 는 성격 때문에 행동 을 간단 하고 우아 한 규칙 으로 이해 하지 못 하고 CSS 규칙 의 고도 결합 에 빠 지게 합 니 다.아래 의 예 를 보십시오.
       
    Hello
    Hello

    현재 IE 에서 보 이 는 효 과 는 왼쪽 에가 나타 난 다음 에 두 개의
    안의 Hello 가 모두 오른쪽으로 이동 하여라 는 유동 블록 을 피 하 는 것 입 니 다.그 중에서 위의
    는 이동 줄 의 높이 만 차지 합 니 다.높이 를 설명 하지 않 았 기 때문에 자연 높이 입 니 다.즉,모든 규칙 이 디 결합 되 어 있 습 니 다.그리고 예 를 들 어 첫 번 째
    의 width 속성 을 복사 합 니 다.결과 가 어떻게 되 는 지 보 세 요.
       
    Hello
    Hello

    이때 첫 번 째
    는를 완전히 수용 하여 두 번 째
    를 아래로 밀 었 다.이 걸 어떻게 설명해 야 되 지?우 리 는 그것 의 height 속성 을 설정 하지 않 았 습 니 다.설마 또 이전 예 에서 말 한 hasLayout 때문에 모든 내용 을 수용 해 야 합 니까?정 해,이것 이 바로 IE 가 길 들 이기 어 려 운 부분 입 니 다.하 나 는 완전히 독립 된 width 속성 이 어야 합 니 다.설정 한 후에 높이 이외 의 다른 영향 을 주 었 기 때문에 간단 하고 우아 한 방식 으로 IE 의 행 위 를 이해 하려 고 시도 할 수 없습니다.IE 를 위해 CSS 를 디자인 하 는 법 을 배 우려 면 표준 CSS 를 먼저 배 워 야 하고 IE 의 기괴 한 행동 에 대한 이해 가 표준 브 라 우 저 를 위해 어떻게 디자인 하 는 지 배 우 는 것 보다 훨씬 어렵 다 는 것 을 증명 한다.이때 당신 은"고객 이 IE 를 포기 하고 전 세계 가 IE 를 포기 하고 싶다 면 정말 아름 답 습 니 다"라 고 말 하고 싶 지 않 습 니까?맞습니다.이것 이 바로 정확 한 생각 입 니 다.IE 디자인 만 을 겨냥 하여 편리 함 을 추구 하 는 것 은 당신 을 중독 시 킬 뿐 입 니 다.
    마지막 으로 만약 에 당신 이 일정한 CSS 기반 을 가지 고 CSS 규칙 을 모두 이해 하지만 조합 CSS 규칙 의 상상력 이 부족 해서 이른바'당신 이 원 하 는 레이아웃 효 과 를 실현 할 수 없다'는 것 을 할 수 없다 면 이것 은 바로 당신 의 내공 이 이미 연습 되 었 고 표면적 인 방법 만 부족 하 다 는 것 입 니 다.이때 저 는'CSS contents and browser compatibility/CSS Mastery'를 보 러 가 는 것 을 추천 합 니 다.이 책 을 읽 고 나 면 레이아웃 의 창조 능력 이 부족 하 다 고 생각 할 뿐 레이아웃 은 없 지만 어떻게 실현 해 야 할 지 모른다 고 믿 을 것 이다.또한 CSS 에 관심 이 있다 면 제 블 로그 구독 을 고려 해 보 세 요.
  • CSS 에 정통 하 다 (feed: Cat in Chinese )
  • http://feeds.feedburner.com/CatChen/Chinese (feed: Cat in dotNET )
    • 설 이 지난 후에 저 는 ASP.NET+CSS 와 관련 된 글 을 쓸 수 있 습 니 다.지금 은 ASP.NET+CSS 의 개발 이 불편 하고 사용http://feeds.feedburner.com/CatChen/dotNET도 그 렇 기 때문에 실제 상황 에 따라 맞 춤 형 Control Adapter 를 만들어 야 문 제 를 해결 할 수 있 습 니 다.이것 이 바로 제 가 다음 에 연구 해 야 할 일 입 니 다.
    bat 와 등록 표 조작 방법 분석<br>오리지널
    수상 한 파일 의 일괄 처 리 는 주체 부분 을 순환 적 으로 쓰 는 것 이 가장 좋다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage