Question

我在同一页面上有一个使用bootstrap和Kendo UI togethor的Web应用程序。该页面在大多数情况下看起来很完美，但我在部署到测试Web服务器后发现了一个问题。任何人都可以帮我弄清楚为什么在使用域名时IE 9的格式化是关闭的，而不是localhost？

For (http://localhost) (Running from VS 2012) Chrome: Works; FireFox: Works; IE 9: Works

For (http://webtrgws01:1200/) Chrome: Works; FireFox: Works; IE 9: Not Working

For (http://localhost:1200/) (This is on the server) IE 9: Works

For (http://webtrgws01:1200/) (This is also on the server) IE 9: Not working

我的代码如下。任何帮助将不胜感激。

@model LatencyApp.Domain.Models.ChartsViewModel

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bentley Systems - Application Latency</title>

<!-- Kendo References -->
<link rel="stylesheet" href="~/Content/kendo.common.min.css">
<link rel="stylesheet" href="~/Content/kendo.blueopal.min.css">
<link rel="stylesheet" href="~/Content/kendo.dataviz.min.css" type="text/css" />
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/kendo.all.min.js"></script>
<script src="~/Scripts/kendo.aspnetmvc.min.js"></script>

<!-- Bootstrap References -->
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-responsive.css" rel="stylesheet" />

</head>
<body>
<div class="container">
    <h2>Bentley Systems - Application Latency</h2>

    @* Filters Begin Here *@
    @using (Html.BeginForm("Index", "Home", FormMethod.Get))
    {
            <div style="white-space: nowrap; display: inline-block;">
                Environment:
                @(Html.Kendo().DropDownList()
                .Name("envDD")
                .DataTextField("LoginEnvName")
                .DataValueField("LoginEnvironmentID")
                .BindTo(Model.EnvForDD)
                .HtmlAttributes(new { style = "width: 100px;" })
                )
                &nbsp;
            </div>
            <div style="white-space: nowrap; display: inline-block;">
                Region:
                @(Html.Kendo().DropDownList()
                .Name("locDD")
                .DataTextField("LoginLocName")
                .DataValueField("LoginLocationID")
                .BindTo(Model.LocForDD)
                .HtmlAttributes(new { style = "width: 100px;" })
                )
                &nbsp;
            </div>
            <div style="white-space: nowrap; display: inline-block;">
                Frequency:
                @(Html.Kendo().DropDownList()
                .Name("freDD")
                .DataTextField("FrequencyName")
                .DataValueField("FrequencyID")
                .BindTo(Model.FreForDD)
                .HtmlAttributes(new { style = "width: 100px;" })
                )
                &nbsp;
            </div>
            <div style="white-space: nowrap; display: inline-block;">
                Date Range: 
                @(Html.Kendo().DateTimePicker()
                .Name("startDate")
                .HtmlAttributes(new { style = "width: 210px;" })
                .Value(DateTime.Today.AddDays(-7))
                .Max(DateTime.Today.AddDays(1))
                .ParseFormats(new string[] { "MM/dd/yyyy" })
                .Events(e => e.Change("startChange"))
                )
                    -
                @(Html.Kendo().DateTimePicker()
                .Name("endDate")
                .HtmlAttributes(new { style = "width: 210px;" })
                .Value(DateTime.Today.AddDays(1))
                .Min(DateTime.Today.AddDays(-7))
                .ParseFormats(new string[] { "MM/dd/yyyy" })
                .Events(e => e.Change("endChange"))
                )
                &nbsp;
            </div>

        <input type="submit" value="Run Report" class="k-button" />
    }
    @* Filters End Here *@



    @* Charts Begin Here *@ 
 @foreach (var item in Model.AppsForChart)
 {
 @Html.Partial("ChartPartial", item.LoginHistories,
                    new ViewDataDictionary{{"AppName", item.LoginAppName},
                                           {"StartDate", item.StartDate.ToShortDateString()},
                                           {"EndDate", item.EndDate.ToShortDateString()},
                                           {"Step", item.Step },
                                           {"AvgDuration", item.AvgDuration },
                                            })
 }
    @* Charts End Here *@

</div>

<!-- Bootstrap -->
<script src="~/Scripts/bootstrap.min.js"></script>

</body>
</html>
<style>
.k-widget.k-chart{
    display: inline-block;
}
</style>

<script>
function startChange() {
    var endPicker = $("#endDate").data("kendoDateTimePicker"),
        startDate = this.value();

    if (startDate) {
        startDate = new Date(startDate);
        startDate.setDate(startDate.getDate() + 1);
        endPicker.min(startDate);
    }
}

function endChange() {
    var startPicker = $("#startDate").data("kendoDateTimePicker"),
        endDate = this.value();

    if (endDate) {
        endDate = new Date(endDate);
        endDate.setDate(endDate.getDate() - 1);
        startPicker.max(endDate);
    }
}
</script>

Answer 1

首选 IE = edge 而不是 IE = 9 以强制使用最新的渲染引擎。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

请参阅HTML5 Boilerplate docs。

Answer 2

我使用以下元标记修复了错误：

<meta http-equiv="X-UA-Compatible" content="IE=9">

Bootstrap / KendoUI / LocalHost工作正常，但不是域名

2 个答案: