Question

我的网站上有一个用div包裹的iframe。

如果我只在电话亭中输入一个字符，则它不会验证，因此会出现红色警告文字。

如果我然后单击电子邮箱并按两次标签，则在第二个标签上，表单向左移动，以便我再也看不到问题文本。

如何横向修复表单以使其不向左移动？

IFrame代码：

<div style="border: 0px solid #a1a1a1; width: 450px; border-radius: 25px; background: #83aeff; overflow: hidden;">&nbsp; &nbsp; &nbsp;<iframe style="overflow: hidden;" src="https://secure.workbooks.com/process/=QzM/Workbooks_Signup_Form?edition=trial" width="490px" height="330px" frameborder="0" scrolling="no">
</iframe></div>

网址：http://content.workbooks.com/free-trial-workbooks-crm

Answer 1

这是因为您选择的iframe宽度太小（我认为这是由Industry选择框引起的）。只需增加div和iframe宽度，移位就会消失。

<div style="border: 0px solid #a1a1a1; width:540px; border-radius: 25px; background: #83aeff; overflow: hidden;">&nbsp; &nbsp; &nbsp;<iframe style="overflow: hidden;" src="https://secure.workbooks.com/process/=QzM/Workbooks_Signup_Form?edition=trial" width="500px" height="330px" frameborder="0" scrolling="no">
</iframe></div>

Fiddle

修改

要动态调整iframe高度，您可以使用此jquery library。将iframeResizer.contentWindow.min.js脚本上传到您的服务器，并将其包含在iframe页面中：

<script type="text/javascript" src="iframeResizer.contentWindow.min.js"></script>

然后上传iframeResizer.min.js，将其与包含div的{{1}}的页面包含在内，并调用适当的函数来调整iframe的大小：

iframe

这应该可以解决问题。有关更多详细信息，请参阅上面链接的GitHub页面。

使iframe / form固定位置

1 个答案: