transparent_javascript 기술을 설정하기 위해 필터를 사용하여 발생한 IE 6/7/8/9 구문 분석 예외에 대한 솔루션

다음과 같습니다

코드를 복사합니다 코드는 다음과 같습니다.

IE 개발자 도구 또는 IE8과 함께 제공되는 개발자 도구를 사용하세요. 구조는 그림 1과 같습니다.

빨간색 원 안에는 div에 추가된 인라인 스타일의 너비, 높이, 배경이 순서대로 정렬되어 있는 것을 볼 수 있습니다. 정상!

그러나 div에 filter:alpha(opacity=20)를 추가한 후

코드를 복사하세요 코드

그림 2와 같이 상황이 바뀌었습니다.

빨간색 원에 표시된 것처럼 너비와 필터가 한 줄로 압축됩니다. 일반적인 상황에서는 너비가 새 줄에서 시작되어야 합니다.
페이지 요소의 올바른 렌더링에 영향을 주지 않는 한 이는 단지 개발자 도구가 올바르게 표시되지 않는 것이라고 말하는 사람들도 있습니다.
실제로 IE6/7/8/9에서는 이 요소의 너비, 높이, 배경색 및 투명도가 설정에 따라 예상대로 렌더링되고 표시될 수 있습니다. 사진과 같이:

또한, 스타일 태그나 CSS 파일에 스타일을 작성하는 경우에도 위와 같은 현상이 발생합니다.

JS 설정 필터를 다시 보면 상황이 조금 다릅니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

/div>

위 html의 마지막 js 코드에 주목하세요

코드 복사 코드는 다음과 같습니다. d1.style.filter = 'alpha(opacity=20)';

오른쪽 괄호 뒤에는 세미콜론이 없습니다. 이제 문장을 살짝 바꿔보세요(실제로는 약간의 변화입니다. 세미콜론만 추가하시면 됩니다)

코드 복사 코드는 다음과 같습니다 : d1.style.filter = 'alpha(opacity=20);';

즉, 괄호 뒤에 세미콜론 ";"이 추가됩니다. 이때 그림 3과 같이 IE 개발자 도구를 봅니다.

빨간색 원으로 둘러싸인 네 가지 CSS 속성인 배경, 필터, 높이, 너비가 별도의 줄에 표시되는 것을 볼 수 있습니다. 그림 2와 같이 한 줄에 필터와 너비가 표시되지 않습니다.

PS: 많은 인기 JS 라이브러리에서는 투명도를 설정하기 위해 알파(불투명도=20) 뒤에 세미콜론을 추가하지 않습니다.