时间戳

首页 > 解决方案 > css 属性“line-height”在 iframe 包装器下没有效果？

css - css 属性“line-height”在 iframe 包装器下没有效果？

问题描述

我不知道为什么“line-height”在 iframe 下失效，以前有人遇到过同样的问题吗？顺便说一句，有两个差异： 1. 我以某种方式使用 iframe：document.write不是src。有关系吗？2.div下有svg标签

<div style="line-height: 20;">
    <i aria-label="icon: warning" class="anticon anticon-warning icon" style="font-size: 22px;">
      <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="warning" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M464 720a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"></path>
      </svg>
    </i>
</div>

这是一个完整的例子：

setTimeout(function() {
  var iframe = document.getElementById('iframe');
  var doc = iframe.contentWindow.document;
  var body = iframe.contentWindow.document.body;
  doc.open();
  doc.write(`
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>EDITOR DEMO IFRAME</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd@3.26.8/dist/antd.min.css" />
      </head>
      <body>
        test
        <div style="line-height: 20;">
          <i aria-label="icon: warning" class="anticon anticon-warning icon" style="font-size: 22px;"><svg viewBox="64 64 896 896" focusable="false" class="" data-icon="warning" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M464 720a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"></path></svg></i>
        </div>
      </body>
    `);
  doc.close();
}, 2000)
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>EDITOR DEMO</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd@3.26.8/dist/antd.min.css" />
</head>

<body>
  <div id="app">
    <div>
      <i aria-label="icon: warning" class="anticon anticon-warning icon" style="font-size: 22px;"><svg viewBox="64 64 896 896" focusable="false" class="" data-icon="warning" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M464 720a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"></path></svg></i>
    </div>
    iframe：
    <iframe id="iframe" style="width: 500px; height: 500px; border: 1px solid #ccc;"></iframe>
  </div>
</body>

</html>

标签： cssiframeline-height

解决方案

解决了！<!DOCTYPE html>并且<html>在运行时丢失doc.write。

setTimeout(function() {
  var iframe = document.getElementById('iframe');
  var doc = iframe.contentWindow.document;
  var body = iframe.contentWindow.document.body;
  doc.open();
  doc.write(`
      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>EDITOR DEMO IFRAME</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd@3.26.8/dist/antd.min.css" />
      </head>
      <body>
        test
        <div style="line-height: 20;">
          <i aria-label="icon: warning" class="anticon anticon-warning icon" style="font-size: 22px;"><svg viewBox="64 64 896 896" focusable="false" class="" data-icon="warning" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M464 720a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"></path></svg></i>
        </div>
      </body>
      </html>
    `);
  doc.close();
}, 2000)

推荐阅读