带有表单元素的 CSS 浮动 div 在 Mac 上的 Safari 3 中消失

发布于 2024-07-06 08:02:48 字数 2425 浏览 5 评论 0原文

我正在一起粗略布局并进行一些浏览器测试。 以前从未遇到过此问题,请查看此页面页脚中的联系表单

http://staging.terrilynn.com/fundraise/

有一个宽度为298px的div浮动到在源顺序中排在第一位的权利。 接下来是其他几个 div,每个 div 的子表单元素都向左浮动。

本应出现在右浮动消息 div 左侧的 div 正在消失。

页面在 Firefox 中正确显示。 任何帮助,将不胜感激。

<div id='footer-contact-form'>
  <h1>Request Information <span class='note'>(all fields required)</span></h1>
  <form class="monkForm" method="post" action="http://my.ekklesia360.com/FormBuilder/handleSubmit.php" id="footer-info-request">
    <fieldset>
      <legend>Footer Info Request</legend>
      <div class="textarea required" id="w2376">
        <p class="data">
          <label for="area_2376">Message</label>
          <textarea id="area_2376" name="e_2376" rows="5" cols="20"></textarea>
        </p>
      </div>
      <div class="text required" id="w2377">
        <p class="data">
          <label for="text_2377">Name</label>
          <input id="text_2377" type="text" name="e_2377" value="" />
        </p>
      </div>
      <div class="text required" id="w2378">
        <p class="data">
          <label for="text_2378">Phone</label>
          <input id="text_2378" type="text" name="e_2378" value="" />
        </p></div>
      <div class="text" id="w2379">
        <p class="data">
          <label for="text_2379">Email</label>
          <input id="text_2379" type="text" name="e_2379" value="" />
        </p>
      </div>
      <p id="formsubmit"><input type="submit" name="submit" value="Send" /></p>

      <input type="hidden" name="token" value="8143f99c1d01b4d1207dbe7860e5586d" />
      <input type="hidden" name="SITEID" value="2185" />
      <input type="hidden" name="cpBID" value="367780" />
      <input type="hidden" name="formslug" value="footer-info-request" />
      <input type="hidden" name="CMSCODE" value="EKK" />
      <input type="hidden" name="fkey" value="" />
    </fieldset>
  </form>
</div><!-- #footer-contact-form -->

I'm roughing a layout together and doing some browser testing. Never came across this issue before, check out the contact form in the footer of this page

http://staging.terrilynn.com/fundraising/

There is a div with a width of 298px floated to the right that comes first in the source order. It is followed by several other divs, each with their child form elements floated left.

The div's that should appear to the left of right-floated message div are disappearing.

Page displays correctly in firefox. Any help would be appreciated.

<div id='footer-contact-form'>
  <h1>Request Information <span class='note'>(all fields required)</span></h1>
  <form class="monkForm" method="post" action="http://my.ekklesia360.com/FormBuilder/handleSubmit.php" id="footer-info-request">
    <fieldset>
      <legend>Footer Info Request</legend>
      <div class="textarea required" id="w2376">
        <p class="data">
          <label for="area_2376">Message</label>
          <textarea id="area_2376" name="e_2376" rows="5" cols="20"></textarea>
        </p>
      </div>
      <div class="text required" id="w2377">
        <p class="data">
          <label for="text_2377">Name</label>
          <input id="text_2377" type="text" name="e_2377" value="" />
        </p>
      </div>
      <div class="text required" id="w2378">
        <p class="data">
          <label for="text_2378">Phone</label>
          <input id="text_2378" type="text" name="e_2378" value="" />
        </p></div>
      <div class="text" id="w2379">
        <p class="data">
          <label for="text_2379">Email</label>
          <input id="text_2379" type="text" name="e_2379" value="" />
        </p>
      </div>
      <p id="formsubmit"><input type="submit" name="submit" value="Send" /></p>

      <input type="hidden" name="token" value="8143f99c1d01b4d1207dbe7860e5586d" />
      <input type="hidden" name="SITEID" value="2185" />
      <input type="hidden" name="cpBID" value="367780" />
      <input type="hidden" name="formslug" value="footer-info-request" />
      <input type="hidden" name="CMSCODE" value="EKK" />
      <input type="hidden" name="fkey" value="" />
    </fieldset>
  </form>
</div><!-- #footer-contact-form -->

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

逆夏时光 2024-07-13 08:02:48

我想我发现了问题:

screen.css(第382行)

#footer-contact-form div {
margin:0 300px 10px 0;
overflow:hidden;
}

“overflow:hidden”导致了问题。

I guess I found the problem:

screen.css (line 382)

#footer-contact-form div {
margin:0 300px 10px 0;
overflow:hidden;
}

"overflow:hidden" causes the problem.

随心而道 2024-07-13 08:02:48

您是否尝试过不将

元素浮动到左侧? 你为什么要这样做? 当前布局中不需要它。

Have you tried not floating the <p> elements to the left? Why are you actually doing this? It isn't required in the current layout.

泛泛之交 2024-07-13 08:02:48

哇,成功了!

我使用溢出:隐藏来强制 div 包含浮动标签和输入元素。

但实际上输入元素上的浮动是不必要的。

非常感谢大家。

Wow that worked!

I was using overflow:hidden to force the div to contain the floated label and input elements.

But really the float on the input elements wasn't necessary.

Thanks you all very much.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文