Solve various situations where divs are blocked by iframes

This article introduces you to some situations where p is blocked by iframe, as well as the solutions after being blocked. Friends in need can refer to it.

Similar structure:

The code is as follows:

<p></p><ifram src="<a href="http://caibaojian.com"></iframe">http://caibaojian.com"></iframe</a>

First type: the transparent background is covered

When p uses a transparent background, no matter it is used (opacity or rgba format), except Chrome, other browsers will have p covered by iframe.

Solution:

p Use an opaque background or use a transparent background image.

Second type: z-index failure in ie8

In ie, introduce video into iframeVideoplay This will cause the z-index of p to be invalid, that is, no matter what the z-index of p is set to, it will be covered by the iframe. Source

Solution:

Add a parameter wmode=opaque to the iframe address. If the address is: http://caibaojian.com, then change it to: http://caibaojian.com? wmode=opaque.

Flash is behind other elements

In addition, I saw that flash also has the problem of z-index failure. I also add the above parameter to flash.

The code is as follows:

<param name="wmode" value="transparent">

or

The code is as follows:

<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">

Some parameters of appendix iframe

border

The code is as follows:

<iframe border="3"></iframe>

Set the edge width around the picture and text frame

frameboder

The code is as follows:

<iframe frameboder="0"></iframe>

Set whether the border is 3-dimensional (0=no, 1=yes)

##height,width

<iframe height="31" width="88"></iframe>

scrolling

<iframe scrolling="no"></iframe>

src

<iframe src="girl.gif"></iframe>

Summary【Related recommendations】

Html free video tutorial

Teach you how to insert links in html

Teach you how to parse html under nodejs

Share a super comprehensive summary of HTML and CSS knowledge points

Detailed explanation of Html5 datalist tags and dynamic matching with background data

The above is the detailed content of Solve various situations where divs are blocked by iframes. For more information, please follow other related articles on the PHP Chinese website!