gpt4 book ai didi

css - IE8 中的 Wordpress 联系表格 7 可能是 CSS 或 LESS 问题

转载 作者:太空宇宙 更新时间:2023-11-04 15:54:08 24 4
gpt4 key购买 nike

我的客户站点在 Wordpress 的 ContactForm7 插件提供的站点页脚中有一个联系表单。它在 Chrome、Firefox 和 IE9(几乎还有 IE7)中运行良好。我的主要问题出现在 IE 8 中,其中输入字段在物理上位于正确的位置 - 就在表单标签旁边 - 它们也是可点击的并且您可以输入文本,但字段的表示方面出现在定义为的区域之外包含所有表单元素,因此给人的印象是文本输入区域不在应有的位置。非常困惑。

这是问题的截图:

http://www.fi-testing.co.uk/wpcf7-prob/image.jpg

这是使用的标记,包括联系表单的简码:

<aside class="grid_4 omega cf" id="footer-contact-form">

<h6>Send us a message...</h6>

<?php echo do_shortcode('[contact-form-7 id="134" title="Footer"]'); ?>
</aside>

这是我在后端区域设置的用于创建表单的标记:

<div class="cf">
<label>Your Name*</label>[text* your-name]
</div>

<div class="cf">
<label>Your Email*</label>[email* your-email]
</div>

<div class="cf">
<label>Subject</label>[text your-subject]
</div>

<div class="cf">
<label>Your Message</label>[textarea your-message]
</div>

<div class="cf">[submit class:submit "Send"]</div>

这是相应的 CSS(采用 LESS 格式,但仍然很清楚):

#footer-contact-form{

div.cf{
width:100%;
input, textarea{
float:left;
width:200px;
padding:5px;
background:#eeeeee;
border:none;
// .inner-shadow();
&.submit{
.blue-button();
margin-left:80px;
}
}
label{
float:left;
width:60px;
margin-right:20px;
color:@themeprimary;
font-size:11px;
font-size:1.1rem;
font-style:italic;
}

}
}

我真的不知道问题出在哪里,因为只有 IE8 将表单的“视觉”方面抛到右边。我猜它可能与从我的标记生成的联系表格 7 代码有关,但我真的没有太多这方面的经验。

有没有其他人在 wordpress 或一般表单中遇到过这个问题?

如有任何帮助,我们将不胜感激。

谢谢,

亚当。

最佳答案

在没有看到实际源代码的情况下,我建议将 overflow: hidden; 添加到您的 .cf 类中。您会这​​样做,因为您有 2 个元素 float 在父 div 中,从技术上讲,其中没有内容供 .cf 类符合。

我还建议稍微清理一下您的 CSS。

关于css - IE8 中的 Wordpress 联系表格 7 可能是 CSS 或 LESS 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10801594/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com