使用 height 属性设置 IFrame 高度，忽略 CSS 规则答案

【问题标题】：Set IFrame height using the height attribute, disregarding a CSS rule使用 height 属性设置 IFrame 高度，忽略 CSS 规则
【发布时间】：2021-07-29 18:39:37
【问题描述】：

有谁知道为什么 IFrame 在指定 css 规则后不会使用 height 属性？在下面的示例中，没有一个 IFrame 的高度为 500 像素。

<html>
<head>
    <style>
        * {
            box-sizing: border-box;
        }

        iframe {
            height: 200px;
        }

        iframe.auto {
            height: auto;
        }

        iframe.inherit {
            height: inherit;
        }

        iframe.initial {
            height: initial;
        }

        iframe.revert {
            height: revert;
        }

        iframe.unset {
            height: unset;
        }
    </style>
</head>
<body>
    <iframe height="500"></iframe>
    <iframe class="auto" height="500"></iframe>
    <iframe class="inherit" height="500"></iframe>
    <iframe class="initial" height="500"></iframe>
    <iframe class="revert" height="500"></iframe>
    <iframe class="unset" height="500"></iframe>
</body>
</html>

【问题讨论】：

<iframe style="height: 500px" 在这种情况下表现如何？
<iframe style="height: 500px"> 将正确设置高度为500px。一些 3rd 方库的问题是它们只更新 iframe 的高度属性而不是样式定义。如果没有某种钩子、观察者或其他复杂的方法，如果 CSS 中存在由 iframe 继承的高度定义，它们将优先于高度属性。我似乎无法找到停止CSS高度定义的继承并回退到高度属性的方法。
对于我们的案例，我们可以直接向上游发送电子邮件并要求更新样式和高度属性吗？
我联系了格雷格，看看这是否可行。对我们来说，用一个类来定义当前的 CSS 定义可能会更容易。

标签： html css iframe

【解决方案1】：

在 html 样式属性中height（非常古老的时尚，除非编写电子邮件代码）您不能使用“px”。默认情况下它总是“px”，不能是其他任何东西。只需添加height="500"More info

【讨论】：

即使没有px，高度仍然不会回退到属性。