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
The code is as follows:<iframe height="31" width="88"></iframe>
scrolling
The code is as follows:<iframe scrolling="no"></iframe>
src
The code is as follows:<iframe src="girl.gif"></iframe>
Summary【Related recommendations】
Teach you how to insert links in html
3.Teach you how to parse html under nodejs
4.Share a super comprehensive summary of HTML and CSS knowledge points
5.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!