IE8 jQuery HTML无法正确显示

Question

我有一个下拉框，当下拉列表中的选项被更改时，使用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中的外观

Answer 1

好的，我发现了问题。我使用CSS3选择器进行样式设置，但遗憾的是在IE8中无效。希望这有助于将来的任何人。