相关疑难解决方法(0)

IE8问题与Twitter Bootstrap 3

我正在使用新的Twitter Bootstrap创建一个站点.该网站看起来很好,适用于IE8以外的所有必需浏览器.

在IE8中,它似乎是显示移动版本的元素,但在我的桌面的整个屏幕上延伸.我相信我遇到的问题是Twitter引导程序首先是移动的.所以出于某种原因IE8正在寻找这个选项.

我还注意到container该类似乎没有按预期提取max-width CSS属性.谁能看到我做错了什么？

<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="/SiteFiles/js/modernizr.js"></script>

<!-- CSS -->
<link href="/SiteFiles/css/main.css" rel="stylesheet">

Run Code Online (Sandbox Code Playgroud)

<header>
    <div class="topArea clearfix">
        <div class="container">
            <div class="topLinks">
                <div class="btn-group">
                    <span class="flag" data-toggle="dropdown">&nbsp;</span>
                    <ul class="dropdown-menu">
                        <li><a href="#">Country 1</a></li>
                        <li><a href="#">Country 2</a></li>
                        <li><a href="#">Country 3</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Country 4</a></li>
                        <li><a href="#">Country 5</a></li>
                        <li><a href="#">Country 6</a></li>
                    </ul>
                </div>
                <div class="visible-sm btn-group">
                    <div class="plus" data-toggle="dropdown"><i class="icon-plus icon-2x">&nbsp;</i></div>
                    <ul …

Run Code Online (Sandbox Code Playgroud)

html css internet-explorer-8 twitter-bootstrap twitter-bootstrap-3

wra*_*von

2014 06-11

227
推荐指数

8
解决办法

18万
查看次数

如何使IE8上的Bootstrap响应式布局工作

我已经搜索了一段时间,发现有些人让它工作,但没有一个提供任何代码示例.

我尝试了他们的建议,但它对我不起作用.通过建议,我尝试添加<meta http-equiv="X-UA-Compatible" content="IE=edge" />,respond.js或者css3-mediaqueries-js,但没有一个帮助.

这里有一个的jsfiddle,如果你与IE8浏览它,你会看到两个a与b在同一行,不管浏览器的宽度.

但是,如果您使用Chrome,FF或IE9或更高版本进行查看,则会根据浏览器宽度在不同的行或单行上看到它们.

UPDATE

我试图一次取消注释其中一个(css3-mediaquery,html5shiv并做出响应),但是对其中任何一个都没有运气.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/css/bootstrap-combined.min.css" rel="stylesheet">
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="span4">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <div class="span8">
                LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.
            </div>
        </div>
    </div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/js/bootstrap.min.js"></script>

    <%--<script type="text/javascript" src="js/css3-mediaqueries.js"></script>--%>
    <%--<script type="text/javascript" src="js/html5shiv.js"></script>--%>
    <%--<script type="text/javascript" src="js/respond.js"></script>--%>

    </script> …

Run Code Online (Sandbox Code Playgroud)

internet-explorer-8 fluid-layout media-queries responsive-design twitter-bootstrap

Ray*_*eng

2012 12-19

19
推荐指数

3
解决办法

8万
查看次数