Bootstrap 3 和 IE 的兼容性问题答案

【问题标题】：Bootstrap 3 and IE compatibility issuesBootstrap 3 和 IE 的兼容性问题
【发布时间】：2014-09-14 19:26:54
【问题描述】：

我一直在使用 Bootstrap 3 开发一个 webforms 项目。在使用 Visual Studio 时，我制作了布局，在发布之前一切看起来都很棒。当我在 Visual Studio 中运行该站点并告诉它在 IE 中打开时，它看起来像这样：

然后当我发布网站并访问它时，它变成了这个：。

知道为什么吗？ Chrome 和 Firefox 没有这个问题。如果需要，请在页面顶部，以防出现代码问题：

<%@ Page Title="New Sheet" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="NewSheet.aspx.cs" Inherits="ShootSheetsBoot.NewSheet" Async="true" EnableEventValidation="false" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<script>
    $(function () {
        $('.multiselect').multiselect(
        {
            maxHeight: '200',
            buttonWidth: '100%',
        });
    });
</script>

<script type="text/javascript" src="../Scripts/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="../Scripts/bootstrap-multiselect.css" type="text/css" />

<div class="container">
    <h2>New Shoot Sheet</h2>
....

还有母版页：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="ShootSheetsBoot.SiteMaster" %>

<%@ Register TagPrefix="ajax" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - Shoot Sheets</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>

    <webopt:BundleReference runat="server" Path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
    <form runat="server">
        <ajaxToolkit:ToolkitScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </ajaxToolkit:ToolkitScriptManager>

        <div class="navbar navbar-default navbar-fixed-top">
        ....

【问题讨论】：

什么版本的 IE 出现问题？

标签： c# asp.net twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

发布后 IE 出现问题。你只需要指定兼容性指令：

<head runat="server">
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> //This line solve the issue
 <title><%: Page.Title %> - Shoot Sheets</title>

【讨论】：

【解决方案2】：

添加到 fals 的答案，这里是引导模板的提醒：

http://getbootstrap.com/getting-started/#template

【讨论】：

我应该在每个页面上使用它还是只在我的主页面上使用它？当我将它添加到我的母版页时，错误的答案修复了它......前端网络开发对我来说是新的。
只有母版页应该这样做。