> 웹 프론트엔드 > HTML 튜토리얼 > iframe에 의해 div가 차단되는 다양한 상황 해결

iframe에 의해 div가 차단되는 다양한 상황 해결

Y2J
풀어 주다: 2017-05-23 09:29:37
원래의
4711명이 탐색했습니다.

이 글에서는 iframe에 의해 p가 차단되는 몇 가지 상황과 차단된 후의 해결 방법을 소개합니다.

유사한 구조:

코드는 다음과 같습니다.

<p></p><ifram src="<a href="http://caibaojian.com"></iframe">http://caibaojian.com"></iframe</a>
로그인 후 복사

첫 번째 유형: 투명한 배경이 가려져 있습니다

p가 투명한 배경을 사용하는 경우 사용 여부(불투명도 또는 rgba 형식)에 관계없이 Chrome을 제외한 다른 브라우저에서는 p가 iframe으로 보호됩니다.

해결책:

p 불투명한 배경을 사용하거나 투명한 배경 이미지를 사용하세요.

두 번째 유형: ie8의 z-index 오류

ie에서는 iframe에 비디오를 도입합니다.비디오재생 p의 z-index가 유효하지 않게 됩니다. 즉, p의 z-index가 어떻게 설정되든 iframe에 포함됩니다. 소스

해결책:

iframe 주소에 wmode=opaque 매개변수를 추가합니다. 주소가 http://caibaojian.com인 경우 http://caibaojian으로 변경합니다. com? wmode=불투명.

플래시는 다른 요소 뒤에 있습니다

또한 플래시에도 Z-index 오류가 발생하는 문제가 있음을 확인하고 위의 매개변수를 플래시에 추가합니다

코드는 다음과 같습니다.

<param name="wmode" value="transparent">
로그인 후 복사

또는

코드는 다음과 같습니다.

<EMBED src="<a href="https://cdn.css-tricks.com/FlashAnimation.swf">https://cdn.css-tricks.com/FlashAnimation.swf</a>" type="application/x-shockwave-flash" wMode="Transparent">
로그인 후 복사

부록 iframe의 일부 매개변수

border

코드는 다음과 같습니다.

<iframe border="3"></iframe>
로그인 후 복사

프레임 주변의 가장자리 너비를 설정

frameboder

코드는 다음과 같습니다.

<iframe frameboder="0"></iframe>
로그인 후 복사

테두리 3D 여부 설정(0=아니요, 1=예)

높이 ,너비

코드는 다음과 같습니다.

<iframe height="31" width="88"></iframe>
로그인 후 복사

테두리의 너비와 높이 설정

스크롤

코드는 다음과 같습니다.

<iframe scrolling="no"></iframe>
로그인 후 복사

스크롤바 유무(예, 아니오, 자동)

src

코드는 다음과 같습니다.

<iframe src="girl.gif"></iframe>
로그인 후 복사

iframe에서 호출하는 파일이나 이미지를 지정합니다(html, htm, gif, jpeg, jpg, png, txt,*.*)

요약
[관련 추천]

1. HTML 무료 동영상 튜토리얼

html에 링크 삽입하는 방법을 알려줍니다.

3. nodejs에서 HTML을 구문 분석하는 방법을 가르쳐 주세요

4. HTML 및 CSS 지식 포인트에 대한 매우 포괄적인 요약을 공유합니다

5. Html5 데이터리스트 태그와 배경 데이터와의 동적 매칭에 대한 자세한 설명

위 내용은 iframe에 의해 div가 차단되는 다양한 상황 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿