IE7 and CSS display properties
Here is some asp.net markup:
<tr style="display:none" id="AllInRateRow">
<td id="td6">
All-In Fixed Rate <span id="allInRateHelp" />
</td>
<td id="td7">
<%= Html.TextBoxFor(m => m.FixedRate, new { @class = "economicTextBox", propertyName = "FixedRate", dontRegisterNewIndication = true })%> %
</td>
</tr>
<tr style="display:none" id="ProfitRow">
<td id="td93">
Your Swap Profit
</td>
<td id="yourSwapProfit">
<%= Html.TextBoxFor(m => m.Fees.ProfitAmount, new { @class = "economicTextBox", propertyName = "Fees.ProfitAmount", dontRegisterNewIndication = true })%>
<%= Html.RadioButtonFor(m => m.Fees.ProfitType, (int)Chatham.Enumerations.IndicationProfitType.bps,
new { label = "bps", propertyName = "Fees.ProfitType", dontRegisterNewIndication = true })%>
bps
<%= Html.RadioButtonFor(m => m.Fees.ProfitType, (int)Chatham.Enumerations.IndicationProfitType.CurrencyAmount,
new { label = "$", propertyName = "Fees.ProfitType", dontRegisterNewIndication = true })%>
$
</td>
</tr>
I think it's a problem with the display property for CSS. It doesn't display them on page load which is the correct thing, but then the selection of this is supposed to change that:
<td id="td4">
Options <span id="solverHelper" />
</td>
<td id="solveType">
<%=Html.DropDownListFor(m => m.Fees.CalculationSource, DropDownData.SolverOptionsList(),
new { propertyName = "Fees.CalculationSource", dontRegisterNewIndication = true })%>
</td>
And those things happen through JQuery setting CSS and changing it like so:
var pricing开发者_如何学PythonOptions = $("#Fees_CalculationSource").val();
if(pricingOptions == <%= ((int)Chatham.Web.Models.Indications.SwapModel.SolverOptions.AllInRate).ToString() %>)
{
$("#AllInRateRow").css("display", "none");
$("#ProfitRow").css("display", "table-row");
if(canExcludeFees) $("#IncludeFeesOption").css("display", "table-row");
else $("#IncludeFeesOption").css("display", "none");
}
else if (pricingOptions == <%= ((int)Chatham.Web.Models.Indications.SwapModel.SolverOptions.Profit).ToString() %>)
{
$("#AllInRateRow").css("display", "table-row");
$("#ProfitRow").css("display", "none");
$("#IncludeFeesOption").css("display", "table-row");
if(canExcludeFees) $("#IncludeFeesOption").css("display", "table-row");
else $("#IncludeFeesOption").css("display", "none");
}
else if (pricingOptions == <%= ((int)Chatham.Web.Models.Indications.SwapModel.SolverOptions.None).ToString() %>)
{
$("#AllInRateRow").css("display", "table-row");
$("#ProfitRow").css("display", "none");
$('input[propertyname=Fees.IncludeFeeIndicator]:eq(1)').attr('checked', 'checked');
$(
"#IncludeFeesOption").css("display", "none");
}
I think IE7 is unable to work with setting the CSS to the table-row property, but it does work with the 'none'.
Am I correct? And if I am, what would be a workaround?
If I recall correctly IE7 uses display:block
. The easiest way to show the elements would be to just call the show/hide methods from jQuery instead of trying to control the display property yourself.
$("#AllInRateRow").show();
$("#ProfitRow").hide();
This will work in all browsers and you will not need to worry about browser specifics.
精彩评论