我有一个 Web 应用程序，它在同一页面上同时使用 Bootstrap 和 Kendo UI。该页面大部分时间看起来都很完美，但在部署到测试 Web 服务器后我发现了一个问题。谁能帮我弄清楚为什么在使用域名而不是本地主机时 IE 9 的格式不正确？
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;" })
)
</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;" })
)
</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;" })
)
</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"))
)
</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>
最佳答案
优先使用 IE=edge 而不是 IE=9 以强制使用最新的渲染引擎。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
关于css - Bootstrap/KendoUI/LocalHost 工作正常，但不是域名，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15100502/