CSS의 다양한 브라우저와 호환되는 솔루션

1. CSS의 여러 브라우저는 브라우저 호환성을 위해 반복적으로 정의할 수 있는 다양한 키워드를 지원합니다.
중요는 FireFox 및 IE7에서 인식될 수 있습니다.
* IE6 및 IE7에서 인식될 수 있습니다. IE6에서 인식됨
*+ IE7에서 인식 가능
IE6과 FF의 차이점:
Background:orange;*Background:blue
IE6과 IE7의 차이점:
Background:green; 중요 ;배경:파란색;
IE7과 FF의 차이점:
배경:주황색; *배경:녹색
FF, IE7 및 IE6의 차이점:
배경:주황색;*배경:녹색 ! 중요;* 배경:블루;
IE7, IE8 호환:


2. IE 관련 조건부 주석

< !--[IE 7인 경우]>



;



3. 실제 픽셀에 대한 여러 브라우저의 해석
IE/Opera: 개체의 실제 너비 = (왼쪽 여백) + 너비 + (오른쪽 여백)
Firefox/Mozilla: 개체의 실제 너비 = (왼쪽 여백) + ( border-left-width) + (padding-left) + width + (padding-right) + (border-right-width) + (margin-right)

4. 마우스 제스처 문제: FireFox의 커서 속성 손을 지원하지 않지만 포인터를 지원하며 IE는 둘 다 지원하므로 호환성을 위해 포인터

5. FireFox에서 HTML 태그의 스타일 속성을 설정할 때 모든 위치, 너비, 높이 및 크기 값을 지정합니다. ​​다음에는 px 가 와야 하는데, IE도 이 쓰기 방식을 지원하므로 px 단위가 일률적으로 추가됩니다. 예를 들어 Obj.Style.Height = imgObj.Style.Height + 'px';

6. FireFox는 padding 5px 4px 3px 1px와 같은 축약형 패딩 속성 설정을 구문 분석할 수 없습니다. -top:5px; padding-right:4px; 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,opacity=60); FireFox: 불투명도:0.6;

9. CSS 제어 둥근 모서리: IE: 둥근 모서리는 지원되지 않습니다.

FireFox: -border-radius:4px; 또는
-moz- border-radius-topleft:4px
-moz-border-radius-topright:4px;
-moz-border-radius- Bottomright:4px;

10. CSS 이중선 범프 테두리: IE: border:2px outset;

FireFox:
-moz- 테두리 상단 색상: #d4d0c8 흰색
-moz -border-left-colors: #d4d0c8 흰색
-moz-border-right-colors:#404040
-moz-border; -bottom-colors:#404040 #808080;

11. IE는 커서 스타일 파일을 사용자 정의하기 위해 CSS 메서드인cursor:url()을 지원하지만 FireFox는 위의 스타일 중 하나를 지원하지 않습니다. >
12. IE에는 Select 컨트롤이 항상 위에 있고 모든 CSS가 Select 컨트롤에서 작동하지 않는 버그가 있습니다.

13. IE는 그림 및 텍스트 콘텐츠를 포함하여 Form에서 Label 태그를 지원합니다. FireFox는 그림이 포함된 레이블을 지원하지 않습니다. CheckBox의 라디오 또는 레이블 레이블은 효과를 생성하지 않습니다

14. FireFox의 TextArea는 onScroll 이벤트를 지원하지 않습니다

15. 디스플레이 인라인 및 블록을 지원하지 않음

16. FireFox는 Div에 대해 왼쪽 여백을 설정하고, 자동으로 설정된 경우 오른쪽 여백은 이미 중앙에 있지만 IE에서는 작동하지 않습니다

17 .FireFox가 본문에 텍스트 정렬을 설정하면 Div는 중앙에 정렬되기 전에 margin:auto(주로 margin-left margin-right)를 설정해야 합니다.

18. 하이퍼링크 순서는 L-V-H-A입니다. 즉,

이렇게 하면 방문 후 일부 하이퍼링크에 마우스 오버 및 활성 스타일이 포함되지 않는 것을 방지할 수 있습니다

19. IE CSS에서 긴 단락에 대해 자동 줄바꿈을 설정하려면 FireFox에서 JS 삽입 방법을 사용하여 이를 수행합니다.


20. -container 부동 속성을 추가한 후에는 컨테이너가 자동으로 열리지 않습니다.
해결 방법: 부동을 지우려면 태그가 끝난 후 다음 태그에 CSS Clear:both;

를 추가하세요.