Xiaojie_Experience 교환과 호환되는 div+CSS
- WBOY원래의
- 2016-05-16 12:03:571639검색
IE6과 FF의 차이점:
background:orange;* background:blue;
IE6과 IE7의 차이점:
background:green !important; background:blue
IE7과 FF의 차이점:
배경:주황색; *배경:녹색;
FF, IE7, IE6의 차이점:
배경:주황색;*배경:녹색 !important;*배경:파랑
IE7, IE8 호환:
HEAD
1. CSS의 여러 브라우저는 브라우저 호환성을 위해 반복적으로 정의할 수 있는 서로 다른 키워드를 지원합니다.
!important는 FireFox 및 IE7에서 인식할 수 있습니다.
* IE6, IE7에서 인식
_ IE6에서 인식
*+ IE7에서 인식
2. IE 전용 조건부 주석
3. 픽셀
IE/Opera: 개체의 실제 너비 = (왼쪽 여백) + 너비 + (오른쪽 여백)
Firefox/Mozilla: 개체의 실제 너비 = (왼쪽 여백) + (테두리 -왼쪽 -너비) + (패딩-왼쪽) + 너비 + (오른쪽 패딩) + (테두리-오른쪽-너비) + (여백-오른쪽)
4. 마우스 제스처 문제: FireFox의 커서 속성은 손을 지원하지 않습니다. 하지만 포인터와 IE는 둘 다 지원하므로 호환성을 위해 포인터가 사용됩니다.
5. FireFox에서 HTML 태그의 스타일 속성을 설정할 때 모든 위치, 너비, 높이 및 크기 값은 다음과 같아야 합니다. px.IE도 이 쓰기 방식을 지원하므로 px 단위로 균일하게 추가됩니다. 예를 들어 Obj.Style.Height = imgObj.Style.Height + 'px';
6. FireFox는 padding 5px 4px 3px 1px와 같은 축약형 패딩 속성 설정을 구문 분석할 수 없습니다. 5px; padding-right:3px; padding-left:1px0;
7. ul 및 ol과 같은 목록의 들여쓰기를 제거할 때 스타일은 list-style:none; margin:0px;padding:0px; 여기서 margin 속성은 IE에 유효하고 padding 속성은 FireFox
에 유효합니다. 8. CSS 제어 투명성: IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0, 불투명도=60); FireFox: 불투명도:0.6;
9. CSS 제어 둥근 모서리: IE: 둥근 모서리를 지원하지 않습니다.
FireFox: -moz-border-radius:4px; border-radius-topleft:4px;
-moz-border -radius-topright:4px;
-moz-border-radius-bottomleft:4px;
10. CSS 이중선 범프 테두리: IE: border: 2px outset;
FireFox:
-moz-border-top-colors:
-moz-border-left- colors: #d4d0c8 white;
-moz-border-right- colors:#404040 #808080;
-moz-border-bottom-colors:#404040 #808080
11. 커서 스타일 파일 및 스크롤 막대 색상 스타일을 사용자 정의하기 위한 커서:url(); FireFox 위의 어느 것도 지원되지 않습니다.
12. IE에는 선택 컨트롤이 항상 맨 위에 있고 모든 CSS가 작동하지 않는 버그가 있습니다. 컨트롤 선택
13. IE는 그림 및 텍스트를 포함하여 양식에서 레이블 태그를 지원합니다. FireFox는 그림이 포함된 레이블을 지원하지 않습니다. 그림을 클릭해도 라디오 또는 CheckBox 레이블이 적용되지 않습니다.
14 . FireFox의 TextArea는 onScroll 이벤트를 지원하지 않습니다
15. FireFox는 인라인 및 디스플레이 블록을 지원하지 않습니다
16. FireFox가 Div에서 margin-left 및 margin-right를 자동으로 설정하면 이미 중앙에 배치됩니다. IE에서는 작동하지 않습니다
17. FireFox가 Body에 text-align을 설정하면 Div는 중앙 정렬 전에 margin:auto(주로 margin-left margin-right)를 설정해야 합니다
18. CSS를 설정하는 것이 가장 좋습니다. 하이퍼링크 스타일은 L-V-H-A 순서입니다.즉,
이렇게 하면 방문한 후 일부 하이퍼링크에 마우스 오버 및 활성 스타일이 적용되지 않는 것을 방지할 수 있습니다.
CSS에서 자동으로 줄 바꿈되도록 긴 단락 설정 IE에서는 FireFox에서 word-wrap:break-word를 설정합니다. 이를 달성하려면 구체적인 코드는 다음과 같습니다.
20. 컨테이너는 Open
을 자동으로 지원할 수 없습니다. 해결책: 태그가 끝난 후 다음 태그에 CSS clear:both;
를 추가합니다. 21. 플로팅 후 IE6은 외부 여백을 실제 여백 해결 방법: display:inline 추가 22. IE6에서는 이미지 아래에 공백이 생깁니다.
해결 방법: img에 display:block을 추가하거나 수직 정렬 속성을 수직 정렬:상단 | middle |text-bottom
23. IE6 아래 두 레이어 사이에 간격이 있습니다. 해결 방법: 오른쪽 div를 float:left로 설정하거나 IE6을 기준으로 margin-right:-3px를 정의하세요. 24. LI의 내용이 길이를 초과합니다. 그런 다음 줄임표를 표시합니다
li {
width:200px
white- space:nowrap;
text-overflow:ellipsis;
overflow: 숨김
->
🎜>25. 요소의 높이와 줄 높이를 같은 값으로 설정하여 텍스트를 세로로 가운데에 배치합니다.
height:30px;
line-height:30px;
}
-->
26. 텍스트 및 텍스트 입력 상자를 정렬하려면 다음을 추가해야 합니다. middle; CSS의 속성 설정
27. WEB 표준을 지원하는 브라우저에서는 고정 높이 값을 설정하면 IE6처럼 늘어나지 않는데, 고정 높이를 설정해서 늘릴 수 있게 해주고 싶으신가요? height 속성을 제거하고 min-height 를 설정하는 것입니다. min-height를 지원하지 않는 IE6과 호환되도록 다음과 같이 정의할 수 있습니다.
{
height:auto!important
min-height:200px;
해결책: CSS의 본문 설정을 html로 변경하세요
29. IE6에서는 기본 줄 높이 문제로 인해 높이가 약 1px인 컨테이너를 정의할 수 없습니다. 해결책: CSS에서 다음과 같이 컨테이너를 설정합니다: Overflow:hidden | Zoom:0.08 | line-height: 1px 30. transparent 속성을 Flash로 설정하면 레이어가 Flash 위에 표시됩니다 31. FireFox는 Padding 속성을 설정한 후 그에 따라 응답합니다. Width 및 Height 속성 값을 늘리십시오. IE는 그렇지 않습니다. 해결책: !important 메소드를 사용하여 추가 높이 및 너비 세트 32. FireFox는 div 사이의 공백을 무시하지만 IE는 이를 처리합니다. 따라서 연결된 두 div 사이에 공백과 캐리지 리턴을 두지 마십시오. 그렇지 않으면 서로 다른 브라우저 간에 잘못된 형식이 발생할 수 있습니다. 그 유명한 3px 편차로 이유를 찾기가 어렵습니다 33. 다음과 같은 형식으로 구성됩니다 콘텐츠가 많으므로 부모가 높이를 100% 또는 자동으로 설정하더라도 다른 브라우저에서는 여전히 그대로 유지되지 않습니다. 자동 늘이기 해결 방법은 아래쪽에 높이가 1인 공간을 생성하는 것입니다. 레이어의 코드는 다음과 같습니다
34. IE와 FireFox는 글꼴 크기에 대한 해석이 다르며 FireFox는 13px, IE는 16px입니다.
35. IE와 FireFox는 공백 크기에 대한 해석이 다르며 FireFox는 4px입니다. 8px
우선 CSS 해킹 방법에 대한 소개가 인터넷에 많이 나와 있고 초보자들이 헷갈리는 경우가 많습니다. 이러한 CSS 해킹 방법 중 일부는 매우 특수한 상황을 대상으로 하는 반면 다른 일부는 상대적으로 일반적인 방법입니다.
후자의 경우 일상적인 학습 작업에서 일부를 수집하는 데 더 많은 주의를 기울일 수 있습니다. 전자는 문제가 발생할 때 해결책을 찾기 위해 온라인에서 검색하면 됩니다.
보다 일반적인 해킹 방법은 다음과 같습니다. 예를 들어 CSS의 특정 속성에 대해 브라우저마다 다른 값을 설정하려고 합니다. 예를 들어, 특정 div의 경우 너비가 Firefox에서는 50픽셀, IE에서는 60픽셀이 되기를 원합니다. 그렇다면 그것을 달성하는 방법은 무엇입니까? 다음 코드를 참조하세요:
#demo div{
width:50px; /* FireFox 유효*/
+width:60px; /* IE 유효*/
}
위 코드에서 2번째 줄의 width:50px는 일반적인 스타일입니다. 다음 줄에서는 width 속성 앞에 더하기 기호를 추가합니다. 이 스타일은 Firefox에서는 유효하지 않은 것으로 간주되지만 IE에서는 이 더하기 기호가 사용됩니다. 숫자는 무시되므로 여전히 너비 속성으로 이해되므로 이전 항목의 설정을 재정의하므로 Firefox 브라우저와 IE 브라우저를 구분할 수 있습니다.
그렇다면 IE 6과 IE 7을 더욱 차별화하려면 어떻게 해야 할까요? 다음 코드를 참조하세요:
#demo div{
width:50px; /* FireFox 유효*/
+width:60px; /* IE 7 유효*/
_width:70px ; /* IE 6 유효*/
}
위 코드는 세 가지 브라우저를 구분할 수 있습니다. IE7에서는 속성 앞에 더하기 기호를 추가하면 더하기 기호가 무시되고, 속성 앞에 밑줄을 추가하면 전체 스타일이 무시되므로 세 가지 주류 브라우저의 구분이 실현됩니다.
이쯤 되면 우리는 어떤 상황에서 이 방법을 사용하여 브라우저를 구분할 수 있을까 하는 생각이 자연스럽게 들게 됩니다. 우리가 만들고 싶은 페이지에는 보통 두 가지 상황이 있습니다. 하나는 처음부터 만드는 것이고, 다른 하나는 기존 웹 페이지를 기반으로 수정하거나 복구하는 것입니다.
첫 번째 경우에는 웹 페이지의 모든 세부 사항에 대해 매우 명확하므로 Firefox 및 IE와의 호환성 문제가 자주 발생하지 않더라도 일반적으로 문제를 해결할 수 있는 다른 방법을 찾을 수 있습니다. 두 번째 경우에는 웹 페이지가 매우 복잡할 수 있고 계단식 관계도 매우 복잡하기 때문에 훨씬 더 복잡합니다. 특정 속성은 그에게 영향을 미치기 때문에 "반창고를 바르는 것"으로만 수리할 수 있는 경우가 많습니다.
예를 들어 다음 페이지의 최종 효과는 둥근 모서리 상자를 만들 때 IE에서는 둥근 모서리를 정렬한 후 Firefox에서는 그림과 같이 정렬 불량이 나타나고 Firefox에 따라 조정하면 IE에서는 정렬 불량이 다시 발생합니다.
페이지의 내용이 레이어별로 중첩되어 있어 자세한 내용을 알지 못하면 문제의 원인을 찾기가 어렵습니다. 따라서 여기서는 패치 방법을 사용하는 것이 매우 편리합니다(가장 우아하고 완전한 방법은 아니지만). 예를 들어 둥근 이미지의 위치를 제어하는 속성의 경우 위의 방법을 사용하여 별도로 제어합니다.
요약하자면, 모든 속성에 대해 더하기 기호나 밑줄 방법을 사용하여 다양한 브라우저에 대한 개별 설정을 얻을 수 있습니다. 물론, 어떤 해킹 방법이라도 주의해서 사용해야 한다는 점을 지적해야 합니다. 표준적이고 우아한 CSS에 따라 디자인하는 것이 가장 좋습니다. 이러한 코드는 훨씬 더 읽기 쉽고 유지 관리하기 쉬울 것입니다. 이것이 우리의 목표이기도 합니다. 추구하다.
왜 div+css는 ie6에서는 문제가 없는데 firfox에서는 문제가 발생하는데 심각하게 모양이 틀려지네요. 감사합니다
IE와 FF의 가장 큰 차이점은 1입니다. . 1024의 해상도에서 IE는 최대 1002PX를 표시하고 FF는 1005PX2를 표시합니다. IE는 내결함성이 매우 뛰어납니다. 즉, 잘못된 코드를 작성하고 적게 작성하면 올바른 FF~~~`초보자에게 일반적인 문제: 부동 부동 소수점이 지워지지 않습니다~~~~.clear{ 명확: 둘 다; 높이: 1px; 상단:-1px; 오버플로:숨김} 각 부동소수점 뒤에