使固定[固定]位置

Question

我的网站上有个iframe包在div里。

如果我只在电话框中输入一个字符，它就不会生效，因此会出现红色警告文本。

如果然后在电子邮件框中单击并按两次选项卡，那么第二个选项卡上的表单就会向左移动，这样我就不能再看到问题文本了。

如何水平修正表单，使其不会向左移动？

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

这是因为如果您选择的宽度太小(我认为这是由于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，用包含iframe的div从页面中包含它，并调用适当的函数来调整iframe的大小：

<script type="text/javascript" src="iframeResizer.min.js"></script>
<script type="text/javascript">iFrameResize();</script>

这应该能起作用。有关详细信息，请参阅上面链接的GitHub页面。