Bootstrap / KendoUI / LocalHost Works Fine, But Not Domain Name

问题

I have a web application using bootstrap and Kendo UI togethor on the same page. THe page looks perfect most of the time, but I noticed a problem after deploying to a Test Web Server. Can anyone please help me figure out why the formatting is off for IE 9 when using a domain name, and not 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

My code is below. Any help will be appreciated.

@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>

回答1:

Prefer IE=edge over IE=9 to force use of the most up to date rendering engine.

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

See the HTML5 Boilerplate docs.

回答2:

I fixed the bug with the following meta tag:

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

来源：https://stackoverflow.com/questions/15100502/bootstrap-kendoui-localhost-works-fine-but-not-domain-name

标签

css

twitter-bootstrap

kendo-ui

data-visualization