Question

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

然后，当我发布网站并转到它时，它变为： it turns into this 。

知道为什么吗？ 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">
        ....

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

Answer 2

添加到fals＆＃39;回答，这里提醒一下bootstrap模板：

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

Bootstrap 3和IE兼容性问题

2 个答案: