1

私はこのサイトhttp://inauguralseason.com/を取得しました。IE 8 で [お問い合わせ] をクリックすると、フロートボックスでページが開きます。問題は、フロートボックスが画面全体を占め、お問い合わせフォームが中央に配置されることです。 ..なぜそれをしているのか、誰かが何か考えを持っていますか?

4

3 に答える 3

1

あなたの質問は「なぜお問い合わせフォームが中央に配置されていないのか」であり、「フロートボックスが画面全体を占めているのはなぜか」ではないと思います。
floatboxのコンテンツは、iframeソースがhttp://inauguralseason.com/?page_id=12
です 。フォームはdivwithクラスに含まれていcontactBackgroundます。このクラスはstyle.cssファイルで定義されており、margin: auto中央に配置する必要があるプロパティがあります。残念ながら、ここ
で 読むことができるように、このメソッドはIE8の癖モードでは機能しません。指示に記載されているように、このモードはfloatboxではサポートされていません。解決策は、ページの先頭に宣言を 追加するだけです。
DOCTYPE
floatbox iframeのソースコードを見ると、タグ<html>と<body>タグが欠落していることにも気付いたので、これらのタグも追加する必要があります。
結果のHTMLコードは次のようになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style>
    body{
        background-image: url('http://inauguralseason.com/wp-content/themes/twentyeleven/images/repeating_bq_pink.gif') !important;
    }
    </style>
    <link rel="stylesheet" type="text/css" media="all" href="http://inauguralseason.com/wp-content/themes/twentyeleven/style.css" />
</head> 
<body>  
    <div id="main" style="padding-top:11px;">
        <article id="post-12" style="padding:0!mportant; margin:0!important; width:595px; height:600px;" class="post-12 page type-page status-publish hentry">
            <header class="entry-header">
                <!--<h1 class="entry-title"></h1>-->
            </header><!-- .entry-header -->
            <div class="contactBackground">
                <div class="wpcf7" id="wpcf7-f17-p12-o1">
                    <form action="/?page_id=12#wpcf7-f17-p12-o1" method="post" class="wpcf7-form">
                        <div style="display: none;">
                            <input type="hidden" name="_wpcf7" value="17" />
                            <input type="hidden" name="_wpcf7_version" value="3.2.1" />
                            <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f17-p12-o1" />
                            <input type="hidden" name="_wpnonce" value="1050e77acd" />
                        </div>
                        <p>
                            Your Name (required)<br />
                            <span class="wpcf7-form-control-wrap your-name">
                                <input type="text" name="your-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" />
                            </span>
                        </p>
                        <p>
                            Your Email (required)<br />
                            <span class="wpcf7-form-control-wrap your-email">
                                <input type="text" name="your-email" value="" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" size="40" />
                            </span> 
                        </p>
                        <p>
                            Subject<br />
                            <span class="wpcf7-form-control-wrap your-subject">
                                <input type="text" name="your-subject" value="" class="wpcf7-form-control wpcf7-text" size="40" />
                            </span> 
                        </p>
                        <p>
                            Your Message<br />
                            <span class="wpcf7-form-control-wrap your-message">
                                <textarea name="your-message" class="wpcf7-form-control  wpcf7-textarea" cols="40" rows="10"></textarea>
                            </span> 
                        </p>
                        <p>
                            Please Enter The Text Below<br />
                            <span class="wpcf7-form-control-wrap captcha-715">
                                <input type="text" name="captcha-715" value="" class="wpcf7-form-control  wpcf7-captchar" size="40" />
                            </span>
                        </p>
                        <p>
                            <input type="hidden" name="_wpcf7_captcha_challenge_captcha-715" value="1614713562" /><img alt="captcha" src="http://inauguralseason.com/wp-content/uploads/wpcf7_captcha/1614713562.png" class="wpcf7-form-control  wpcf7-captchac wpcf7-captcha-captcha-715" width="84" height="28" />
                        </p>
                        <p>
                            <input type="submit" value="Send" class="wpcf7-form-control  wpcf7-submit" />
                        </p>
                        <div class="wpcf7-response-output wpcf7-display-none"></div>
                    </form>
                </div>
            </div>
            <footer class="entry-meta"></footer><!-- .entry-meta -->
        </article><!-- #post-12 -->
    </div>
</body>
</html>

アップデート：

floatboxの幅の問題は、「style.css」ファイルの1535行目で定義されているiframeスタイルによって異なります。

/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
    max-width: 100%;
}
于 2012-11-01T10:48:32.463 に答える
0

これまで floatbox を実際に使用したことはありませんが、連絡先フォームが表示されるモーダルの高さや幅を設定するなどの追加オプションがあると思います。

http://floatboxjs.com/options

于 2012-10-29T13:54:21.573 に答える
0

ページソースには複数の HTML 要素があります:S float-box 自体は、実際にはこれらのインスタンスの 1 つの本体です。さて、あなたの問題があります。フロート ボックス コンテナーをプルするだけのプラグインを使用しているのではなく、ドキュメント全体を取得していると推測できます。

HTML タグの問題を解決する前にできること (またはやりたいこと) はあまりありません。その後、コンテナをターゲットにしてサイズ/間隔を調整するのは非常に簡単です。高さ: Ypx; パディング: Zpx; (etc, etc} 必要なサイズがわかっていると仮定して、WordPress でユーザー スタイルのオーバーライドを介して実行できます。

お役に立てれば。

于 2012-10-31T18:02:57.597 に答える