0

这很奇怪。我有以下结构：

<div id="iframe-wrapper">
    <iframe src="form.html"></iframe>
</div>

和 CSS：

#iframe-wrapper {
    position: fixed;
    height: 350px;
    width: 200px;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}

form.html仅包含：

<!DOCTYPE HTML>

<html>
<body>

    <form action="http://...">
        <input type="text" name="first_name" placeholder="First Name" required="required" />
        <input type="text" name="last_name" placeholder="Last Name" required="required" />
        <input type="email" name="email" placeholder="Email" required="required" />
        <input type="text" name="cellphone" placeholder="Cellphone" required="required" />
        <button type="submit">Sign Up!</button>
    </form>

</body>
</html>

现在，在 Chrome 中，当我单击输入字段时，什么也没有发生。我应该看到一个闪烁的光标，但没有。如果我开始写作，仍然什么都没有出现。但！如果我滚动页面，iframe 显然会刷新，并且突然出现我所写的内容。

如果我position: fixed;从#iframe-wrapper所有内容中删除，则按预期工作。

我在 Chrome 中注意到了这种行为，但在 FF 中它工作正常。

我真的需要这个位置固定的 iframe，有什么建议吗？

4

0 回答 0