WordPress的联系表格7可能CSS或LESS问题在IE8

我的客户网站在WordForm的ContactForm7插件提供的站点页脚中有一个联系表单。它在Chrome，Firefox和IE9（以及IE7）中运行良好。我的主要问题出现在IE 8中，输入字段在物理上位于正确的位置 - 紧挨着表单标签 - 它们也是可点击的，您可以输入文本，但字段的表示方式出现在定义的区域之外包含所有的表单元素，因此给人的印象是文本输入区域不是它们应该是的位置。很混乱。WordPress的联系表格7可能CSS或LESS问题在IE8

这里的问题的截图：

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（以较少的格式，但仍然很明显）：

#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或一般的形式？

任何帮助将不胜感激。

谢谢，

亚当。

来源

2012-05-29 AdamJB

没有看到实际的来源，我建议将overflow: hidden;添加到您的.cf类。你可以这样做，因为你有两个元素在父div内部浮动，并且技术上没有其中的.cf类内容符合。

我也建议清理一下你的CSS。

来源

2012-05-29 15:49:36 David

WordPress的联系表格7可能CSS或LESS问题在IE8

回答

相关问题