0

ドロップダウンの選択が変更されたときに、jquery .html 関数を使用して div を設定するドロップダウン ボックスがあります。

これは、サイトが IE8 で表示されている場合を除いて、すべてのブラウザーで正しく機能します。表示の問題があります。

Javascript のすべてのマークアップを確認しましたが、すべての html 要素が適切に閉じられ、ネストされています。これが私のコードです：

HTML:

<form action="/" method="post" id="selectClub">     
    <p>Thanks for thinking about joining FitSpace. Our five step joining process takes less than 5 minutes, and is quick, easy and all online.  To get started, just choose the club you would like to join..</p>
    <label for="chooseClub">Choose Club</label>
    <select name="chooseClub">      
        <option value="">-- Please Select --</option>
        <?php foreach($this->clubs as $club) { ?>
            <option value="<?php echo $club['GYMGUID']; ?>"><?php echo $club['GYMNAME']; ?></option>
        <?php } ?>
    </select>
</form>
<div id="ratesWrapper">

</div>

jQuery:

if (data.result = true) {
 var html = "";
 jQuery.each(data.rates, function (i, v) {
     var link = "<?php echo JRoute::_('index.php?option=com_signup&view=memberForm1'); ?>";
     var imgLink = "<?php echo addslashes($this->baseurl . '/templates/protostar/images/bg_pricing_join_now.png'); ?>";
     html += "<a class='rate' href='" + link + "&GYMGUID=" + v.GYMGUID + "&RATEGUID=" + v.RATEGUID + "'>";
     html += "<h4><img src='" + imgLink + "' />" + v.RATENAME + "</h4>";
     if (v.RATENAME.indexOf('Value') > -1) {
         html += "<p class='time'>Monthly</p>";
     } else if (v.RATENAME.indexOf('Flex') > -1) {
         html += "<p class='time'>Monthly</p>";
     } else if (v.RATENAME.indexOf('Annual') > -1) {
         html += "<p class='time'>Annual</p>";
     }
     if (v.RATENAME.indexOf('Annual') > -1) {
         html += "<p class='ratePrice'>&pound;" + v.RATE + " annual fee</p>";
     } else {
         html += "<p class='ratePrice'>&pound;" + v.RATE + " per month</p>";
     }
     if (v.RATENAME.indexOf('Value') > -1) {
         html += "<p class='signUp'>With a one-off &pound;29 joining fee</p>";
         html += '<p>18 months minimum term<br /> Paid by Direct Debit monthly</p>';
     } else if (v.RATENAME.indexOf('Flex') > -1) {
         html += '<p class="signUp">With a one-off &pound;29 joining fee</p>';
         html += "<p>No Contract, but you need to give us one month's notice to cancel.</p>";
         html += "<p>Paid by Direct Debit monthly</p>";
     } else if (v.RATENAME.indexOf('Annual') > -1) {
         html += "<p class='signUp'>With NO joining Fee.</p>";
         html += '<p>12 months membership<br /> Paid by one-off Direct Debit</p>';
     }
     html += "<p class='clickHere'>Click here to join!</p>";
     html += "</a>";
 });
 html += "<ul class='signupBottomBoxes'>";
 html += "<p>All memberships include:</p>";
 html += "<li>Proximity Membership card which provides Unlimited Use</li>";
 html += "<li>Join One Club - use them all</li>";
 html += "<li>Free Induction</li>";
 html += "</ul>";
}

jQuery('#ratesWrapper').html(html);
jQuery('#ratesWrapper').hide().fadeIn('slow');

}

IE8 IE Web dev ツールバーを使用してマークアップを確認すると、生成されたマークアップは次のように表示されます。

<div id="ratesWrapper"/>

なぜこれが起こっているのかわかりません。誰かが私を正しい方向に向けることができますか? ありがとう

どのように見えるべきか：

ここに画像の説明を入力

IE8 での表示

ここに画像の説明を入力

4

1 に答える 1

0

問題が見つかりました。残念ながら IE8 では機能しないスタイリングに CSS3 セレクターを使用しています。これが将来誰にも役立つことを願っています。

于 2013-07-26T14:14:04.797 に答える