可以在A标签中嵌入iFrame并使悬停/链接有效吗？

Posted 2021-05-06

我有一个包含A标签的div，其内容适用于常规内容，但在其中一个div上，需要显示来自库存源的iframe。

问题是iframe混淆了悬停状态，显然标签并没有真正包装或使iframe成为链接。

有一个简单的解决方案吗？

示例html：

    <div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-3 col-md-push-9 ">
      <a href="http://www.apple.ca">
        <div class="ffb-imageContainer ffb-stock"></div>
        <div class="ffb-stockTitle">Company Name (TRP)</div>
        <div class="iframeWrapper">
          <iframe width="500" height="240" title="stock information" src="https://investor.shareholder.com/ctrp/includes/inc-iframe-stock-quote.cfm"></iframe>
        </div>
        <div class="ffb-textArea">4 Lorem ipsum dolor sit amet, consectur dola cing elit, sed do eiusmod temular</div>
      </a>
    </div>

答案

specification says：

a元素......内容模型：透明，但必须没有交互式内容或元素后代

它定义了interactive content：

a（如果存在href属性）音频（如果存在控件属性）按钮详细信息嵌入iframe img（如果存在usemap属性）输入（如果type属性不处于隐藏状态）标签选择textarea视频（如果controls属性存在）

… 所以不行。您不能将iframe作为锚的后代。