css 브 라 우 저가 호 환 되 지 않 는 원인 분석 및 해결 방법 1/2 페이지

아래 에서 몇 가지 html 인 코딩 요 소 를 요약 하고 여러분 을 지적 할 수 있 기 를 바 랍 니 다.1.문자 자체 의 크기 가 호 환 되 지 않 습 니 다.마찬가지 로 font-size:14px 의 송 체 문자 로 서로 다른 브 라 우 저 에서 차지 하 는 공간 이 다 릅 니 다.ie 에서 실제 적 으로 높 은 16px 를 차지 하고 하 류 는 3px 를 차지 하 며 ff 에서 실제 적 으로 높 은 17px 를 차지 합 니 다.상 류 는 1px 를 차지 하고 하 류 는 3px 를 차지 하 며 opera 에서 더욱 다 릅 니 다.솔 루 션:텍스트 에 line-height 를 설정 합 니 다.모든 텍스트 에 기본 라인-height 값 이 있 는 지 확인 하 십시오.이 점 은 매우 중요 하 다.고도 에서 우 리 는 1px 의 차 이 를 용인 할 수 없다.2.ff 아래 용기 의 높이 제한,즉 용기 가 height 를 정의 한 후에 용기 테두리 의 외형 이 확정 되 고 내용 에 의 해 커지 지 않 으 며 ie 아래 는 내용 에 의 해 커지 고 높이 제한 에 의 해 효력 을 잃 습 니 다.그 러 니 용기 에 height 를 쉽게 정의 하지 마 세 요.3.용기 문 제 를 터 뜨리 고 수평적 으로 논의 하기 도 한다.float 용기 가 폭 을 정의 하지 않 으 면 ff 아래 내용 은 가능 한 한 용기 폭 을 벌 리 고 ie 아래 는 내용 의 접 기 를 우선 고려 합 니 다.따라서 내용 이 깨 질 수 있 는 유동 용 기 는 width 를 정의 해 야 합 니 다.작은 실험:관심 이 있 으 면 이 실험 을 보 세 요.서로 다른 브 라 우 저 에서 아래 의 각 코드 를 각각 테스트 합 니 다.a.
b.
c.
d.
위의 코드 는 브 라 우 저 마다 다 릅 니 다.실험 은 작은 height 값 div 에 대한 활용 에서 기원 되 었 습 니 다.
,작은 height 값 은 overflow:hidden 과 함께 사용 해 야 합 니 다.실험 이 재 미 있 을 뿐 브 라 우 저가 용기 의 경계 에 대한 해석 은 크게 다 르 고 용기 내용 의 영향 결 과 는 각각 다르다 는 것 을 설명 하고 자 한다.4.부동 의 제거,ff 아래 부동 을 제거 하지 않 으 면 안 됩 니 다.여러분 의 잘못된 부분 을 바로 잡 고 호 환 되 지 않 으 면 ff 가 썩 는 것 은 옳지 않다 고 말 합 니 다.사실은 ie 의 이상 한 표현 이 우 리 를 어 쩔 수 없 게 할 때 가 많 습 니 다.아래 에 ie6 의 갖가지 나 쁜 행적 을 열거 하 시 오.5.가장 미움 을 받 는 double-margin bug.ie6 에서 유동 용기 에 margin-left 또는 margin-right 의 실제 효 과 는 수치의 2 배 라 고 정의 합 니 다.솔 루 션,유동 용기 에 display:inline 을 정의 합 니 다.6.mirrormagin bug,외부 요소 에 float 요소 가 있 을 때 외부 요 소 는 margin-top:14px 를 정의 하면 margin-bottom:14px 를 자동 으로 생 성 합 니 다.padding 도 비슷 한 문제 가 발생 할 수 있 습 니 다.모두 ie6 의 특산 품 입 니 다.이런 bug 가 발생 하 는 상황 은 비교적 복잡 합 니 다.이런 발생 조건 뿐만 아니 라 체계 적 으로 정리 되 지 않 았 습 니 다.솔 루 션:외부 요소 가 border 를 설정 하거나 float 를 설정 합 니 다.인용:ff 와 ie 에서 용기 에 대한 margin-bottom,padding-bottom 의 해석 은 때때로 일치 하지 않 고 이와 관련 이 있 는 것 같다.7.삼 키 는 현상 은 편폭 에 한 하여 전개 하지 않 겠 습 니 다.아니면 ie6,상하 두 개의 div,위의 div 설정 배경 인 데 아래 에 배경 이 없 는 div 도 배경 이 있 는 것 을 발견 했다.이것 이 바로 삼 키 는 현상 이다.위의 배경 삼 키 기 현상 에 대응 하고 스크롤 아래 테두리 가 부족 한 현상 도 있다.솔 루 션:zoom:1 을 사용 합 니 다.이 zoom 은 전문 적 으로 ie6 bug 를 해결 하기 위해 태 어 난 것 같다.8.주석 도 bug~~~"많이 나 온 돼지 한 마리."이것 은 이전 사람들 이 이 bug 가 사용 한 문안 을 정리 한 것 입 니 다.ie6 의 이 bug 에서 여러분 은 페이지 에서 돼지 글자 가 두 번 나타 나 는 것 을 볼 수 있 습 니 다.중복 되 는 내용 의 양은 주석 이 얼마나 되 는 지 에 따라 달라 집 니 다.해결 방안:" picRotate start 방법 으로 주석 을 작성 합 니 다.9.
  • 에 float
    를 추가 합 니 다.이것 은 전형 적 이 고 까다 로 운 호환성 문제 입 니 다.여러분 의 직시 를 불 러 일 으 키 고 li 의 서로 다른 속성 에 대해 서로 다른 해석 효 과 를 가 질 수 있 습 니 다.ff 의 해석 은 조금 이해 할 수 있 습 니 다.ie6 의 해석 은 당신 을 헷 갈 리 게 할 것 입 니 다.문제 의 복잡성 으로 인해 다른 글 에서 이 문 제 를 전문 적 으로 토론 할 것 입 니 다.'얼 사용 소감'이라는 글 에는 관련 성과 가 있 지만 문제 해결 과정 은 제시 되 지 않 았 다.10."float:left"를 사 용 했 습 니 다.display:inline'의 얼 의 이상 한 표현.이 를 통 해 알 수 있 듯 이 css 는 ie6 의 double margin bug 에 추 가 된 display:inline 입 니 다.이것 도 제 css 시스템 의 중요 한 부분 입 니 다.라 는 글 에서 관련 논술 이 있 습 니 다.이 css 가 얼 에 쓰 이 는 것 은 당신 을 매우 고 통 스 럽 게 할 것 입 니 다.시 킬 때 까지 여기 서 더 말 하면 안 되 잖 아.
    1 2 다음 페이지 전문 을 읽다
  • 좋은 웹페이지 즐겨찾기