Bootstrap 3 and IE compatibility issues
Question
I've been working on a webforms project using Bootstrap 3. While using visual studio, I made the layout and everything looked great until I published it. When I run the site inside of Visual Studio and tell it to open in IE, it looks like this:
Then when I publish the site, and go to it, it turns into this: .
Any idea why? Chrome and Firefox are not having this issue. If it's needed, heres the top of the page, in case the issue it with the code:
<%@ 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>
....
And the master page:
<%@ 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">
....
2 answers
solution1
3 ACCPTED 2014-09-14 20:04:40
There's a issue with IE after publishing. You just have to specify the compatibility directive:
<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>
solution2
1 2014-09-14 20:38:50
adding to fals' answer, here's a reminder of the bootstrap template:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.