1
认为我已经完成了这个计算器。它看起来很棒，直到我在IE中查看它。你们可以看看，让我知道为什么它是各种各样的搞砸了吗？在IE浏览器和其他浏览器中进行比较。只需向下滚动到“付款计算器”click herejQuery计算器不能在IE中工作。在其他浏览器中看起来不错
我正在使用jQuery UI单选按钮。因此，下面的很多样式都是为了与来自jQuery库的内容进行对抗。
感谢您提前提供任何帮助。
<script>
$(document).ready(function() {
$("#interest_rate, #amount, #payments").buttonset();
$('#amount > input, #interest_rate > input, #payments > input').on("click", function() {
if ($("#interest_rate > input:checked").attr("id") == "weekly") {
var numOfPayments = 32;
$('#pmt_freq').html('WEEKLY PAYMENT<sup>2</sup><div class="triangle-dwn">');
} else if ($("#interest_rate > input:checked").attr("id") == "two_weeks") {
var numOfPayments = 15;
$('#pmt_freq').html('BI-WEEKLY PAYMENT<sup>2</sup><div class="triangle-dwn">');
} else if ($("#interest_rate > input:checked").attr("id") == "semi_monthly") {
var numOfPayments = 16;
$('#pmt_freq').html('SEMI-MONTHLY PAYMENT<sup>2</sup><div class="triangle-dwn">');
} else if ($("#interest_rate > input:checked").attr("id") == "monthly") {
var numOfPayments = 8;
$('#pmt_freq').html('MONTHLY PAYMENT<sup>2</sup><div class="triangle-dwn">');
}
if ($('#payments > input:checked').val() == "bronze") {
$('#weekly').val(.0569);
$('#two_weeks').val(.1138);
$('#semi_monthly').val(.1233);
$('#monthly').val(.2467);
} else if ($('#payments > input:checked').val() == "silver") {
$('#weekly').val(.0531);
$('#two_weeks').val(.1062);
$('#semi_monthly').val(.1150);
$('#monthly').val(.23);
} else if ($('#payments > input:checked').val() == "gold") {
$('#weekly').val(.0492);
$('#two_weeks').val(.0985);
$('#semi_monthly').val(.1067);
$('#monthly').val(.2133);
} else if ($('#payments > input:checked').val() == "platinum") {
$('#weekly').val(.0454);
$('#two_weeks').val(.0908);
$('#semi_monthly').val(.0983);
$('#monthly').val(.1967);
} else {
$('#weekly').val(.0404);
$('#two_weeks').val(.0808);
$('#semi_monthly').val(.0875);
$('#monthly').val(.175);
}
var amount = ($('#amount > input:checked').val());
var interest_rate = ($('#interest_rate > input:checked').val());
var interest_rate_plus = +1 + +interest_rate;
var interRate_numOfPay = Math.pow(interest_rate_plus, numOfPayments);
var averagePayments = (interest_rate * amount * interRate_numOfPay)/(interRate_numOfPay - 1);
var totalPaid = averagePayments * numOfPayments;
var fees = totalPaid - amount;
$('#cash_advance').html("$" + amount);
$('#total_fees').html("$" + fees.toFixed(2));
$('#average_payments').html("$" + averagePayments.toFixed(2));
});
});
</script>
这里的HTML：
<div class="calculator-container">
<h2>PAYMENT CALCULATOR</h2>
<form>
<div id="payments">
<label class="calc-descs first"><span>1</span>MEMBERSHIP LEVEL</label>
<input type="radio" id="bronze" name="radio" value="bronze" checked="checked"><label for="bronze">bronze</label>
<input type="radio" id="silver" name="radio" value="silver"><label for="silver">silver</label>
<input type="radio" id="gold" name="radio" value="gold"><label for="gold">gold</label>
<input type="radio" id="platinum" name="radio" value="platinum"><label for="platinum">platinum</label>
<input type="radio" id="premier" name="radio" value="premier"><label for="premier">premier</label>
</div>
</form>
<form>
<div id="interest_rate">
<label class="calc-descs second"><span>2</span>PAY FREQUENCY</label>
<input type="radio" id="weekly" name="radio"><label for="weekly">weekly</label>
<input type="radio" id="two_weeks" name="radio" checked="checked"><label for="two_weeks">every two weeks</label>
<input type="radio" id="semi_monthly" name="radio"><label for="semi_monthly">twice a month</label>
<input type="radio" id="monthly" name="radio"><label for="monthly">monthly</label>
</div>
</form>
<form>
<div id="amount">
<label class="calc-descs third"><span>3</span>LOAN AMOUNT</label>
<input type="radio" id="300" name="radio" value="300.00"><label for="300">$300</label>
<input type="radio" id="500" name="radio" value="500.00"><label for="500">$500</label>
<input type="radio" id="750" name="radio" value="750.00" checked="checked"><label for="750">$750</label>
<input type="radio" id="1000" name="radio" value="1000.00"><label for="1000">$1000</label>
<input type="radio" id="1200" name="radio" value="1200.00"><label for="1200">$1200</label>
</div>
</form>
<div id="calc-filler"></div><div class="total-box">LOAN AMOUNT<div class="triangle-dwn"></div></div><div class="total-box">INTEREST + FEES <sup>1</sup><div class="triangle-dwn"></div></div><div id="pmt_freq" class="total-box">BI-WEEKLY PAYMENT <sup>2</sup><div class="triangle-dwn"></div></div><br />
<div id="loan_totals"><label>ESTIMATED LOAN COST</label></div><div id="cash_advance">$750.00</div><div id="total_fees">$847.44</div><div id="average_payments">$106.50</div>
<div class="calc-disclaimer">Calculator defaults loan life base on payment cycle chosen. <sup>1</sup> Calculation is an estimate, your loan cost may vary. <sup>2</sup> Payment may vary.</div>
</div>
而CSS：
.calculator-container { color: #949599; width: 825px; margin: 0 auto; }
.calculator-container h2 { color: #949599; margin-bottom: 30px; }
.ui-buttonset .ui-button { margin: initial }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: initial; border: 2px solid #949599; border-radius: 6px; color: #949599; padding: 11px 22px; line-height: 44px; text-align: center; }
#payments label { padding: 11px 28px;}
#payments label:first-child { padding: 0; }
#amount label { padding: 11px 30px; }
#amount label:first-child { padding: 0; }
.ui-state-active, .ui-state-focus { background: #F15A2B; border: 2px solid #f15A2B; outline: none; color: #fff; }
#interest_rate, #amount, #payments { padding: 1px; margin-bottom: 25px; width: auto; }
#loan_totals { height: 46px; width: 220px; line-height: 46px; float: left; text-align: center; padding-right: 10px; clear: both; }
#cash_advance, #total_fees, #average_payments { background: #F15A2B; width: 150px; height: 46px; line-height: 46px; margin-right: 48px; margin-bottom: 25px; border-radius: 6px; color: #fff; text-align: center; font-size: 1.3em; display: block; float: left; border: 2px solid #fff; -moz-box-shadow: 0 0 0 6px #F15A2B; -webkit-box-shadow: 0 0 0 6px #F15A2B; box-shadow: 0 0 0 2px #F15A2B; }
#average_payments { margin-right: 0; }
#cash_advance { margin-left: 5px; }
#calc-filler { width: 220px; height: 30px; float: left; display: block; margin-right: 5px; }
.total-box { position: relative; width: 150px; height: 30px; line-height: 12px; margin-right: 48px; text-align: center; font-size: 12px; display: block; float: left; }
.calc-disclaimer { line-height: 11px; font-size: 11px; width: 100%; display: block; clear: both; padding-left: 100px; }
.ui-button-text-only .ui-button-text { padding: initial; }
.calculator-container form br { display: none; }
.calc-descs { display: inline-block; width: 220px; padding: 0; }
.calc-descs span { -webkit-border-radius: 50%; -moz-border-radius; border-radius: 50%; padding: 6px 11px; margin-right: 10px; border: 1px solid #949599; }
.triangle-dwn { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #949599; position: absolute; left: 50%; bottom: 6px; margin-left: -3.5px; }