Question

我有以下mvc代码：

    @Html.DropDownListFor(model => model.State, Model.States, new {  @class = "form-control", 
        // Displays if the country is United States
        style="display:{{State_Display()}}", 
        Name="State"})

    @Html.TextBoxFor(model => model.State, new { @class = "form-control", 
        // Displays if the country is not United States
        style="display:{{Province_Display()}}", 
        Name="Province"})

编辑：我想我应该提一下，我的角度控制器中的省份是一个方法，根据所选的国家/地区返回字符串“none”或“block”。

在Chrome和Firefox的最新版本中，这可以达到您所期望的效果：如果用户从其他控件中选择美国状态，则会显示“状态”字段并隐藏“省”字段。

然而，在IE 10中，两个控件都一直显示。在IE中用f12检查元素，它们都没有任何样式属性。

我想解决这个问题的方法是使用angular来为元素应用额外的CSS类，而不是使用angular来动态更新内联样式，但我的问题仍然存在：

为什么这适用于Chrome和Firefox但不适用于IE？处理的是什么？当我在IE中检查时，为什么Style没有显示任何内容？如果你知道，我的CSS课程理念是否会真正解决这个问题（在我讨厌重做之前）？我想了解原因，以便将来可以避免类似的情况。谢谢！

其他信息：

右键单击，查看页面源（在chrome / IE中都相同）：

<select Name="State" class="form-control" data-val="true" data-val-required="The State field is required." id="State" name="State" style="display:{{State_Display()}}">
<input Name="Province" class="form-control" id="State" name="State" style="display:{{Province_Display()}}" type="text" value="" />

检查（Chrome）：

<select name="State" class="form-control" data-val="true" data-val-required="The State field is required." id="State" style="display:block">...omitted...</select>
<input name="Province" class="form-control" id="State" style="display:none" type="text" value="">

检查（IE）：

<select name="State" class="form-control" id="State" data-val-required="The State field is required." data-val="true">
<input name="Province" class="form-control" id="State" type="text" value=""/>

Answer 1

仍然没有足够的代码可供使用，但您可以采取一些方法。你推荐的类的东西应该工作，但是你的代码中有些东西我们看不到它导致它无法在IE中正确执行。（控制台中的任何错误？）我最好的猜测......你错过了你的DTD，或者设置不正确。尝试在html模板的顶部添加：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

更好的方法（仍然需要确保正确设置DTD）将使用ng-show / ng-hide：http://docs.angularjs.org/api/ng.directive:ngHide

<!-- when $scope.myValue is truthy (element is hidden) -->
<div ng-hide="myValue"></div>

<!-- when $scope.myValue is falsy (element is visible) -->
<div ng-hide="myValue" class="ng-hide"></div>

但是，如果您愿意，可以像这样定义一个css类：

.hide {
   display:none;
}

并将该类应用于您希望在应用程序逻辑中隐藏的任何输入。

使用Angular设置要显示的样式：IE 10中没有损坏，在其他地方工作

1 个答案: