IE 와 FIREFOX 에서 CSS 의 차이 와 해결 방법 1/2 페이지

CSS 는 브 라 우 저 호환성 에 높 은 가 치 를 가지 고 있 으 며,일반적으로 IE 와 Firefox 에 큰 해석 차이 가 존재 하 므 로 호환성 요점 을 소개 합 니 다.고도 에 대한 해석 IE:내용 의 고도 변화 에 따라 고도 가 정의 되 지 않 은 그림 내용 을 포함 하고 높이 가 정의 되 더 라 도 내용 이 높이 를 초과 할 때 실제 높이 Firefox 를 사용 합 니 다.높이 가 정의 되 지 않 았 을 때 내용 에 그림 내용 이 포함 되 어 있 으 면 MF 의 고도 해석 은 인쇄 기준 에 따라 실제 내용 과 고도 가 맞지 않 는 상황 을 초래 할 수 있 습 니 다.높이 를 정 의 했 지만 내용 이 높이 를 초과 할 때 내용 은 정 의 된 높이 를 초과 하지만 지역 에서 사용 하 는 스타일 은 변 하지 않 아 스타일 이 잘못 되 었 습 니 다.  결론:내용 의 높이 를 정할 수 있 는 상황 에서 높이 를 정의 하 는 것 이 좋 습 니 다.만약 에 높이 를 정의 할 방법 이 없다 면 테두리 스타일 을 사용 하지 않 는 것 이 좋 습 니 다.그렇지 않 으 면 스타일 이 혼 란 스 러 울 것 입 니 다!img 대상 alt 와 title 의 해석 alt:사진 이 존재 하지 않 거나 load 오류 가 발생 했 을 때 알림;title:사진 tip 설명.IE 에서 title 을 정의 하지 않 으 면 alt 도 img 의 tip 으로 사용 할 수 있 습 니 다.그러나 MF 에서 두 가 지 는 완전히 표준 에 따라 결론 을 사용 합 니 다.모두 가 img 대상 을 정의 할 때 마지막 으로 alt 와 title 대상 을 모두 작성 하여 각종 브 라 우 저 에서 그의 세부 적 인 차 이 를 정상적으로 사용 할 수 있 도록 합 니 다.css 를 쓸 때 특히 float 를 사용 합 니 다. left(또는 right)가 그림 을 배열 할 때 fireforx 에서 정상 적 이 고 IE 에 문제 가 있 음 을 발견 할 수 있 습 니 다.margin:0 을 사용 하 든 border 를 사용 하 든: 0 으로 구속 해도 소용없다.사실 여기 또 다른 문 제 는 IE 가 빈 칸 에 대한 처리 입 니 다.fireforx 는 무시 하고 IE 는 블록 과 블록 사이 의 빈 칸 을 처리 합 니 다.즉,하나의 div 가 끝 난 후에 하나의 div 에 이 어 써 야 하 며,중간 에 차 나 빈 칸 이 있어 서 는 안 된다 는 것 이다.그렇지 않 으 면 문제 가 있 을 수 있 습 니 다.예 를 들 어 3px 의 편차,그리고 이 원인 은 발견 하기 어렵 습 니 다.매우 운 이 좋 지 않 은 것 은 내 가 또 이런 문제 에 부 딪 혔 다 는 것 이다.여러 개의 img 태그 가 연결 되 어 있 고 그 다음 에 정 의 된 float: left,이 그림 들 이 연결 되 기 를 바 랍 니 다.하지만 결 과 는 fireforx 에서 정상 이 었 고 IE 에 표 시 된 모든 img 은 3px 를 사이 에 두 고 있 었 다.나 는 탭 사이 의 빈 칸 을 모두 삭제 해도 소 용이 없다.나중에 해결 방법 은 img 밖 에 li 를 설치 하고 li 에 대해 margin 을 정의 하 는 것 입 니 다. 0,이렇게 하면 IE 와 Firefox 의 디 스 플레이 편차 가 해 결 됩 니 다.IE 는 일부 모델 에 대한 해석 에 많은 오류 가 발생 할 수 있 으 므 로 많이 시도 해 봐 야 원인 을 발견 할 수 있다.2.내장 DIV:부모 DIV 의 높이 가 하위 DIV 에 따라 자동 으로 변 하지 않 는 해결 방안  콘 텐 츠 내용 이 많 을 때 parent 가 높이 100%또는 auto 를 설정 하 더 라 도 브 라 우 저 에 따라 자동 으로 스 트 레 칭 되 지 않 습 니 다. 해결 방안  는 층 의 맨 아래 에 높이 가 1 인 빈 칸 을 생 성하 여 이 문 제 를 해제 할 수 있 습 니 다 3.CSS DIV 학습 노트 1.기본적으로 각 블록 의 div 모두 자신의 id 가 있어 야 합 니 다.서로 다른 기능 을 가 진 블록 은 같은 id/class 2,조금 큰 블록 div 를 사용 하지 않도록 해 야 합 니 다. 뒤에 다시작,끝 세 가 지 를 표시 하고 문 자 를 숨 기 는 또 다른 방법 TEXT-INDENT: -9999px; LINE-HEIGHT: 0.4.병렬 된 두 열 을 교묘 하 게 처리 합 니 다.1)오른쪽 열 은 P 입 니 다. width=44.5%, float=left 왼쪽 은 P.first, border-right: #a7a7a7 1px solid, width=45%2)오른쪽 열\#right, margin-left:50%왼쪽 열\#left, float=left,width=50% border-right:#a7a7a7 1px solid 이상 두 가지 방법의 관건 은 그 중 하 나 를 float=left 5 로 선택 하고 무 작위 로 그림 을 전환 하 는 것 입 니 다.\#random { BACKGROUND: url(/rotate.php); } 이 방법 은 매우 교묘 하 다.4.div 의 높이 가 오늘 의 소변 에 적응 하 는 것 에 대해 저 는 그의 페이지 에 문 제 를 해결 해 주 었 습 니 다.바로 div 의 높이 가 적응 하 는 것 입 니 다.즉,한 아버지 급 div 에 왼쪽,오른쪽 두 개의 키 div 를 끼 워 넣 었 습 니 다.오른쪽 에 있 는 자 div 내용 은 무한 확장 이 가능 하고 아버지 급 div 의 높이 가 무한 하 게 길 어 질 수 있 습 니 다.일반적인 구조 방법 으로 IE 에서 정확하게 조회 할 수 있 습 니 다.Mozilla 에서 부모 급 div 의 높이 는 10px 정도 로 고정 되 어 있어 높이 에 적응 할 수 없습니다.height:auto 도 안 됩 니 다.어떻게 해 야 합 니까?인터넷 에서 한 편의 자 료 를 참고 하여 자가 적응 높이 를 실현 하려 면 div 층 은 반드시 float 속성 을 가 져 야 한다.그래서 나 는 테스트 를 시작 했다.float:left 면 div 는 페이지 의 가장 왼쪽 으로 달 려 갔다.이것 은 하기 쉽다.나 는 그의 밖 에 div 를 한 층 더 설치 하고 위 치 를 정 했다.그러면 안의 것 은 float:left 라 도 위 치 를 이동 하지 않 을 것 이다.xhtml: ==========================================================         test      test      test                       
           사전 설치 검사       
  • 읽 기 PFC 권한 부여 프로 토 콜
  •        
  • 데이터베이스 초기 화
  •        
  • 설치 완료
  •       
                    CSS ================================================= #container_father { margin-left: auto; margin-right: auto; padding: 0px; width: 750px; } #container {    width: 750px;    border: 1px solid #cccccc;    padding: 8px;    margin: 0px;    background-color: #F1F3F5;    float: left; } FRom: http://ulean.zg163.net/
1 2 다음 페이지 전문 을 읽다

좋은 웹페이지 즐겨찾기