Question

我试图关注此tutorial中的内容，但它只适用于Chrome，Internet Explorer不会在iframe之后创建 :: after 元素。关于如何获得相同结果的任何其他想法？

编辑：我正在使用IE 11。

iframe放在qtip2生成的工具提示中。生成的HTML就像这样：

<div class="qtip qtip-default qtip-shadow qtip-youtube qtip-rounded qtip-customized qtip-pos-tl qtip-fixed qtip-focus qtip-hover" id="qtip-10" 
role="alert" aria-hidden="false" aria-describedby="qtip-10-content" aria-live="polite" 
style="left: 843.02px; top: 289.32px; display: block; z-index: 15001; opacity: 1;" 
aria-atomic="false" tracking="false" data-qtip-id="10">
    <div class="qtip-tip" 
    style="border: 0px currentColor !important; left: 4px; top: -6px; width: 6px; height: 6px; line-height: 6px; background-color: transparent !important;">
        <canvas width="6" height="6" style="border: 0px currentColor !important; width: 6px; height: 6px; background-color: transparent !important;">
        </canvas>
    </div>
    <div class="qtip-titlebar">
        <div class="qtip-title" id="qtip-10-title" aria-atomic="true">Link</div>
    </div>
    <div class="qtip-content" id="qtip-10-content" aria-atomic="true">
        <div style="display: block; white-space: pre-wrap; visibility: visible; -ms-word-wrap: break-word;">
            URL: http://portal/sites/test2/Pages/default.aspx
        </div>
        <iframe name="myiframe" class="iframeLinkUrl" src="http://portal/sites/test2/Pages/default.aspx"
         style="display: block; visibility: visible;" target="myiframe" rel="nofollow">
         </iframe>
         <div style="left: 0px; top: 0px; width: 600px; height: 400px; display: block; visibility: visible; position: absolute; z-index: 9999; background-color: transparent;">
         </div>

     </div>
 </div>

CSS规则一般都是从应用程序继承的，很难在这里放一切。但是要调整iframe的大小以使其看起来像缩略图，我添加了类似的内容：

.qtip-content:after 
{
    content:'';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.qtip-content::after 
{
    content:'';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.qtip-customized {

}

.iframeLinkUrl{
    transform: scale(0.32, 0.31) translate(-73%,-99%);
}

正如你所看到的，我还使用了一个div放在iframe前面，但即便如此，它也不适用于IE：

 <div style="left: 0px; top: 0px; width: 600px; height: 400px; display: block; visibility: visible; position: absolute; z-index: 9999; background-color: transparent;">
 </div>

在IE上将iframe设为缩略图，使其不是交互式

0 个答案: