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 开发工具栏检查标记时，生成的标记显示如下：

<div id="ratesWrapper"/>

我不确定为什么会这样。有人能指出我正确的方向吗？谢谢

它应该看起来如何：

在此处输入图像描述

它在 IE8 中的外观

在此处输入图像描述

4

1 回答 1

0

好的，我发现了问题。我正在使用 CSS3 选择器进行样式设置，但不幸的是，它在 IE8 中不起作用。希望这对将来的任何人都有帮助。

于 2013-07-26T14:14:04.797 回答