Solve various situations where divs are blocked by iframes-HTML Tutorial-php.cn

Solve various situations where divs are blocked by iframes

Y2J

Release： 2017-05-23 09:29:37

Original

4564 people have browsed it

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>

Copy after login

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

Copy after login

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

Copy after login

Some parameters of appendix iframe

border

The code is as follows:

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

Copy after login

Set the edge width around the picture and text frame

frameboder

The code is as follows:

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

Copy after login

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

##height,width

The code is as follows:

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

Copy after login

Set the width and height of the border

scrolling

The code is as follows:

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

Copy after login

Whether there is a scroll bar (yes, no, auto)

src

The code is as follows:

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

Copy after login

Specify the file or image called by the iframe (html, htm, gif, jpeg, jpg, png, txt,*.*)

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!