CSS 웹 페이지 레이아웃에는 IE와 FF 사이에 많은 비호환성 문제가 있는 경우가 많습니다. 다음은 몇 가지 일반적인 가능성과 해결 방법입니다.
1. IE와 Mozilla 간의 레이아웃 차이를 해결하려면 !important를 사용하세요. !important는 CSS1에 정의된 구문입니다. 해당 기능은 지정된 스타일 규칙의 적용 우선순위를 높이는 것입니다. 가장 중요한 점은 IE가 이 구문을 지원한 적이 없지만 다른 브라우저는 지원한다는 것입니다. 따라서 이를 사용하여 IE 및 기타 브라우저에 대해 다양한 스타일을 정의할 수 있습니다. 예를 들어 다음과 같은 스타일을 정의합니다.
예제 소스 코드
[www.downcodes.com] .colortest{
테두리:20pxsolid#60A179!중요;
테두리:20pxsolid#00F;
패딩:30px;
너비:300px;
}
Mozilla에서 탐색할 때는 !important의 우선순위를 이해할 수 있으므로 #60A179 색상이 표시됩니다. IE에서 탐색할 때는 !important의 우선순위를 이해할 수 없으므로 #00F 색상이 표시됩니다.
2. 하이퍼링크 접속 후 호버 스타일이 표시되지 않는 문제를 해결합니다. CSS 속성의 순서 변경: 순서 표준은 다음과 같아야 합니다.
a:링크—a:방문—a:hover—a:활성
3. 길이를 초과한 후 Li의 내용을 타원으로 표시하는 방법 예제 소스 코드
[www.downcodes.com] margin:3px - 모든 면이 3px임을 의미합니다.
margin:3px 5px - 상단과 하단의 값이 3px, 오른쪽과 왼쪽의 값이 5px임을 의미합니다.
margin:3px 5px 7px ——상단 값이 3, 오른쪽 및 왼쪽 값이 5, 하단 값이 7임을 나타냅니다.
여백: 3px 5px 7px 5px - 네 가지 값은 위쪽, 오른쪽, 아래쪽, 왼쪽, 오른쪽, 아래쪽 및 왼쪽을 나타냅니다.
5. IE가 투명 PNG를 올바르게 표시할 수 없는 문제를 해결합니다. 헤더에 코드를 추가합니다. 예제 소스 코드
[www.downcodes.com] <스크립트 언어="자바스크립트">
함수 올바른PNG()
{
for(var i=0; i {
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "왼쪽") imgStyle = "float:왼쪽;"
if (img.align == "right") imgStyle = "float:right;"
if (img.parentElement.href) imgStyle = "커서:손;"
var strNewHTML = " + " 스타일="" + "너비:" + img.width + "px; 높이:" + img.height + "px;" + imgStyle + ";"
+ "필터:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src='" + img.src + "', sizingMethod='scale');">"
img.outerHTML = strNewHTML
나는 = 나는-1
}
}
}
window.attachEvent("onload", rightPNG);
사용(패딩:0; 여백:0; 목록 스타일:내부;)
또는 호환성을 확보하기 위해 (패딩:0; 여백:0; 목록 스타일:없음;)
7. Firefox 및 IE에서 BOX 모델 해석 시 2px 차이에 대한 해결 방법 예제 소스 코드
[www.downcodes.com] div{
여백:30px!중요;
여백:28px;
}
이 두 여백의 순서는 바뀌어서는 안 됩니다. 위에서 언급한 IE에 따르면 !important를 지원하지 않으므로 IE에서는 실제로 다음과 같이 해석됩니다.
예제 소스 코드
[www.downcodes.com] div{
마링:30px;
여백:28px
}
반복되는 정의가 있으면 마지막 정의가 실행되므로 그냥 margin:XXpx!important;라고 쓸 수는 없습니다.
8. 마진의 기본 효과 IE에서는 div의 콘텐츠가 기본적으로 중앙에 정렬되고 FF에서는 기본적으로 왼쪽 정렬됩니다. ff 콘텐츠를 중앙에 배치하는 방법은 코드 margin:auto;를 추가하는 것입니다.
