0

私のクライアントサイトには、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のコードと関係があるのではないかと思いますが、あまり経験がありません。

他の誰かがワードプレスまたは一般的なフォームのいずれかでこの問題に遭遇したことがありますか？

どんな助けでも大歓迎です。

ありがとう、

アダム。

4

1 に答える 1

1

実際のソースを見ずに、クラスに追加することoverflow: hidden;をお勧めします.cf。これを行うのは、親div内に2つの要素があり、技術的には.cfクラスが準拠するコンテンツがないためです。

また、CSSを少しクリーンアップすることをお勧めします。

于 2012-05-29T15:49:36.470 に答える