Question

我的客户网站在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或表格之前遇到过这个问题？

非常感谢任何帮助。

谢谢，

亚当。

Answer 1

如果没有看到实际来源，我建议您在overflow: hidden;课程中添加.cf。你会这样做是因为你有2个元素浮动在父div中，并且在技术上没有内容供.cf类符合。

我还建议稍微清理你的CSS。

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

1 个答案: