CSS를 사용한 다중 브라우저 호환성 문제 및 솔루션 소개
호환성 처리 포인트
1. DOCTYPE은 CSS 처리에 영향을 줍니다.
2. FF: padding을 설정하면 div의 높이가 증가합니다. width이지만 IE는 그렇지 않으므로 추가 높이와 너비를 설정하려면 !important를 사용해야 합니다
3. FF: !important를 지원하지만 IE에서는 이를 무시합니다. FF를 위한 특별한 스타일
4. div의 수직 중심 문제:
vertical-align:middle; DIV line-height: 200px; 그런 다음 텍스트를 삽입하면 세로로 가운데 정렬됩니다. 단점은 줄 바꿈 없이 내용을 제어해야 한다는 것입니다
5. Mozilla Firefox 및 IE의 BOX
모델 은 해석이 일관되지 않아 2px 차이가 발생합니다. 해결책:
div{
여백 :30px!important;margin:28px;}
이 두 여백의 순서는 바뀌어서는 안 됩니다. !important 이
속성 IE는 인식할 수 없지만 다른 브라우저는 식별할 수 있습니다. 따라서 IE에서는 실제로 다음과 같이 해석됩니다.
div{maring:30px;margin:28px}
정의를 반복하면 마지막 정의에 따라 실행되므로 margin:XXpx!important만 쓸 수는 없습니다.
브라우저 차이점
1. ul 및 ol 목록의 들여쓰기 문제
ul, ol 및 기타 목록의 들여쓰기를 제거하려면 스타일을 변경해야 합니다.
list-style:none;margin:0px;padding:0px; margin 속성은 IE에 유효하고 padding 속성은 FireFox에 유효합니다.
[참고] IE에서는 margin:0px를 설정하면 목록의 위쪽, 아래쪽, 왼쪽 및 오른쪽 들여쓰기, 공백 및 목록 번호나 점을 제거할 수 있는 것으로 확인되었습니다. Firefox에서는 margin :0px를 설정하면 위쪽 및 아래쪽 공백만 제거할 수 있습니다. padding:0px를 설정하면 왼쪽 및 오른쪽 들여쓰기만 제거할 수 있습니다. 목록 번호나 점을 제거하려면 list-style:none도 설정해야 합니다. 즉, IE에서는 margin:0px만 설정하면 최종 효과를 얻을 수 있지만, Firefox에서는 margin:0px, padding:0px, list-style:none을 동시에 설정해야 최종 효과를 얻을 수 있습니다.
2. CSS 투명성 문제
IE: filter:progid:DXImageTrans
form.Microsoft.Alpha(style=0,opacity=60). FF:불투명도:0.6.
[참고] 둘 다 작성하고 아래에 불투명도 속성을 넣는 것이 가장 좋습니다.
3. CSS 둥근 모서리 문제
IE: ie7 이하 버전은 둥근 모서리를 지원하지 않습니다.
FF: -moz-b
order-radius:4px 또는 -moz-border-radius-topleft:4px; 테두리-반경-상단오른쪽:4px;-moz-border-반경-하단왼쪽:4px;-moz-국경-반경-하단오른쪽:4px;. [참고] 둥근 모서리 문제는 CSS의 고전적인 문제입니다. 둥근 모서리를 설정하도록 설정된
JQuery프레임워크를 사용하여 이러한 복잡한 문제를 다른 사람에게 맡기는 것이 좋습니다. 생각해 보세요. 하지만 jQuery의 둥근 모서리는 전체 영역의 둥근 모서리만 지원하고 테두리의 둥근 모서리는 지원하지 않습니다. 하지만 이 테두리의 둥근 모서리는 다음 번에 소개하겠습니다.
4. 커서:손 VS 커서:포인터
문제 설명: Firefox는 손을 지원하지 않지만 IE는 포인터를 지원합니다. 둘 다 손 지침입니다.
해결책: 포인터를 균일하게 사용하십시오.
5. 글꼴 크기 정의가 다릅니다
sm
all 글꼴 크기 정의가 다릅니다. Firefox에서는 13px이고 IE에서는 16px입니다. .
해결 방법: 14px 등 지정된 글꼴 크기를 사용하세요.
div와 div 사이에 나란히 배열된 여러 요소(
그림 또는 링크), 코드의 공백 및 캐리지 리턴은 Firefox에서 무시되지만 IE에서는 기본적으로 공백으로 표시됩니다. (약 3px).
6. CSS 이중선 범프 테두리
IE: border:2px out
설정;. FF: -moz-경계-상단-색상: #d4d0c8 흰색;-moz-경계-왼쪽-색상: #d4d0c8 흰색;-moz-경계-오른쪽-색상:#404040 #808080;-moz-경계- 하단 색상:#404040 #808080;
브라우저 버그
1. IE 이중 여백 버그
IE에서 float으로 설정된 div에 설정된 여백은 두 배가 됩니다. ie6에 존재하는 버그입니다.
해결책: 이 div에 를 추가하세요. 예:
<#div id="imfloat"> 🎜>
해당 CSS는
다음은
에서 인용한 내용입니다.
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}오늘 블로그 단락 스타일의 첫 번째 문자 스타일을 설정할 때 공백이 스타일을 무효화할 수도 있다는 사실을 발견했습니다.
다음 코드를 살펴보세요.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
<!--
p{font-size:12px;}
p:first-letter{font-size:300%}
-->
</style>
</head>
<body>세상에게 당신은 한 사람이지만 누군가에게는 당신이 그의 세상 전부입니다. 슬퍼도 눈살을 찌푸리지 마세요. 당신의 미소에 누가 사랑에 빠질지 모르니까요.