程序员经验分享-hwhale

Twitter Bootstrap 3 的 IE8 问题

2024-04-29

我正在使用新的 Twitter Bootstrap 创建一个网站。该网站看起来不错，并且可以在除 IE8 之外的所有必需浏览器中运行。

在 IE8 中，它似乎显示移动版本的元素，但在我的桌面的整个屏幕上延伸。我相信我遇到的问题是 Twitter bootstrap 是移动优先的。因此出于某种原因 IE8 选择了这个选项。

我还注意到containerclass 似乎没有按预期引入 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">

<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 class="dropdown-menu">
                        <li><a href="#">Parts & Service</a></li>
                        <li><a href="#">Store Locator</a></li>
                        <li><a href="#">Find a Service Centre</a></li>
                        <li><a href="#">Parts List</a></li>
                        <li><a href="#">Tool Vibration</a></li>
                        <li><a href="#">Resource Centre</a></li>
                        <li><a href="#">Media Centre</a></li>
                        <li><a href="#">Register your Tools</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                            <button type="button" class="btn btn-default">Where to Buy</button></a></li>
                    </ul>
                </div>
                <div class="topNav">
                    <ul class="hidden-sm">
                        <li>
                            <div class="btn-group">
                                <a href="#" data-toggle="dropdown">Parts & Service</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Store Locator</a></li>
                                    <li><a href="#">Find a Service Centre</a></li>
                                    <li><a href="#">Parts List</a></li>
                                    <li><a href="#">Tool Vibration</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">Resource Centre</a></li>
                        <li><a href="#">Media Centre</a></li>
                        <li><a href="#">Register your Tools</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                            <button type="button" class="btn btn-default">Where to Buy</button></a></li>
                    </ul>
                </div>
                <div class="searchArea">
                    <input type="text" />
                    <a href="#" class="goBtn">GO</a>
                </div>
            </div>
        </div>
    </div>
    <div class="mainNavArea">
        <div class="container rel">

            <div class="logo">
                <img src="/SiteFiles/img/logo.png" title="Milwaukee - Nothing but heavy duty" alt="Milwaukee - Nothing but heavy duty" />
            </div>
            <div class="navi">
                <div class="navbar">
                    <div class="container">

                        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                        <!-- Place everything within .navbar-collapse to hide it until above 768px -->
                        <div class="nav-collapse collapse navbar-responsive-collapse">
                            <ul class="nav nav-justified">
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Power Tools</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Power Tools</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Hand Tools</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Hand Tools</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Test & Measurement</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Test & Measurement</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Accessories</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Accessories</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- /.nav-collapse -->
                    </div>
                    <!-- /.container -->
                </div>
                <!-- /.navbar -->
            </div>

        </div>
    </div>
</header>

您从 CDN (bootstrapcdn.com) 获取 CSS，respond.js 仅适用于本地文件。因此，请使用 bootstrap.css 的本地副本在 IE8 上尝试您的网站。或者阅读：CDN/X 域设置 https://github.com/scottjehl/Respond#cdnx-domain-setup

Note也可以看看：https://github.com/scottjehl/Respond/pull/206 https://github.com/scottjehl/Respond/pull/206罢工>

Update:

请阅读：http://getbootstrap.com/getting-started/#support http://getbootstrap.com/getting-started/#support

此外，Internet Explorer 8 需要使用respond.js 来启用媒体查询支持。

也可以看看：https://github.com/scottjehl/Respond https://github.com/scottjehl/Respond

因此，基本模板的头部包含以下几行：

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

twitterbootstrap

internetexplorer8

twitterbootstrap3

Twitter Bootstrap 3 的 IE8 问题 的相关文章

  • 如何将模糊屏幕设置为整页并在点击页面时转到顶部

    CSS1 有效 parentDisable z index 2000 width 100 height 100 display none position absolute left 0 background url images btra

  • 如何在 Safari 上打开本地 html 文件？

    我想打开本地 html 文件Safari集成到我的Swift 3应用 我知道如何使用网址来做到这一点 这是我用来执行此操作的代码 let encodedString url addingPercentEncoding withAllowed

  • 我的整个 Rails 应用程序仅从一个文件获取 css 为什么

    我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css 我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从p

  • 混合混合模式：乘法在 Chrome 中不起作用

    我正在尝试使用mix blend mode multiply在 Chrome 上 但它无法按预期工作 当我添加时magenta cyan and yellow在一起它不会给我黑色但brown https i stack imgur com

  • 有没有办法根据渲染的字符串创建 DOM 对象？

    有没有办法从整个字符串而不只是innerHTML 创建DOM 对象 我有一个完整呈现的 DOM 形式的字符串

  • TYPO3 显示子页面的内容，包括 css 类

    使用以下打字稿 我从一页上的子页面获取所有内容 lib allPid COA lib allPid 10 HMENU 10 special directory special value 2 1 TMENU 1 expAll 1 NO do

  • IE10中的图像插值

    这是我的用例 我有一个采用响应式设计的网页 该页面垂直分成两半 我想在右侧显示图像 呈现为 PNG 或 JPG 的 PDF 页面 调整窗口大小后 图像的大小应立即更改 我以为我已经解决了这个问题 我将服务器上的图像渲染得足够大 以适应最大可

  • 所有事件的 HTML5 EventSource 监听器？

    我使用 EventSource 在 JavaScript 客户端应用程序中推送通知 我可以像这样附加事件监听器 source addEventListener my custom event type function e console

  • 如何在css3中制作曲线风格的菜单？

    是否可以用css3制作曲线 圆弧样式的菜单 我可以使用canvas或HTML5中的其他东西来实现这一点吗 预先感谢 洛根 不幸的是 我不知道有什么优雅的解决方案 特别是当涉及到菜单项时 但弧线本身应该可以在纯 css 和几个 html 元素

  • 我可以使用 Google Analytics 确定用户浏览器对 HTML5 的支持吗？

    Google Analytics 分析 是否能够检测访问浏览器的 HTML5 支持级别 我想知道我的访问者浏览器中有多少百分比支持 HTML5 目前 获取此数据的唯一方法是分析访问者的浏览器统计信息 然后尝试在每个浏览器自己的帮助页面上查找

  • Swift - 将图像插入 PDF 不再适用于 iOS 13

    目前正在开发在我的贷款计算器应用程序上导出 PDF 的功能 我有一个预览屏幕 可以在您保存 PDF 之前显示它 预览屏幕由带有 html 的 webView 组成 其中包含占位符 我能够成功地将图像插入到正确的占位符上 并将其显示在 PDF

  • jQuery 选择器定位具有 id AND class 的元素不起作用

    我有以下事件处理函数 jQuery document on click button submitb function e alert jQuery 包含在 html 文档中 但是 如果我点击 div class submitb Go di

  • iOS 键盘显示后分屏宽度

    我刚刚开始研究 Cordova 应用程序对分屏多任务处理的支持 到目前为止 该应用程序在模拟器中的 iPad 上显示和调整大小都很好 但是当我单击编辑字段并显示软件键盘时 100 宽度的值开始返回整个屏幕 而不是给出的窗口 初始显示 到目前

  • CSS 动画自定义属性/变量

    一段时间以来我一直在努力让它发挥作用 关键是内部 div 将具有某种形状 并且可能会不止一个 这就是为什么我使用nth child选择器 这个内部 div 应该显示然后再次隐藏一段时间 问题是 我想在一个动画中为所有 后来的 多个内部 di

  • 媒体查询：如何定位桌面、平板电脑和移动设备？

    我一直在对媒体查询进行一些研究 但我仍然不太明白如何定位特定大小的设备 我希望能够针对台式机 平板电脑和移动设备 我知道会存在一些差异 但如果有一个可用于针对这些设备的通用系统 那就太好了 我发现的一些例子 Mobile only scre

  • 在React组件中使用的字符串变量中插入html

    我正在为我的投资组合网站构建一个反应应用程序 目前我已经用 JSX 编写了应用程序 因此我可以添加以下内容 class Project extends React Component render return div h1 this pr

  • 在桌面和移动设备上编写 2 列和 3 列的 Flexbox 代码（换行）

    我真的很难弄清楚这个 CSS flexbox 解决方案 基本上有两个问题 一个是 2 列布局 另一个是 3 列布局 2 列 我认为这可能非常简单 3 列 这可能更高级一些 容器类是 嗯 container 而孩子们只是 left right

  • 带缩略图的轮播和 bootstrap v4

    我看到了带有缩略图的轮播演示bootstrap 3 here http jsfiddle net talmand JS6JV 我正在尝试为 bootstrap v4 实现相同的功能 但无法弄清楚如何修复一些 UI 细节 例如左 右阴影覆盖整

  • 优化 CSS 交付 - Google 的建议

    谷歌建议在 head 中使用非常重要的 CSS 内联 并在内部使用其他 CSS

  • 用 Beautiful Soup 进行抓取：为什么 get_text 方法不返回该元素的文本？

    最近我一直在用 python 开发一个项目 其中涉及抓取一些网站的一些代理 我遇到的问题是 当我尝试抓取某个知名代理站点时 当我要求 Beautiful Soup 查找 IP 在代理表中的位置时 它并没有按照我的预期执行操作 我将尝试查找每

随机推荐

  • QMetaObject::invokeMethod 在以下情况下不起作用：

    从静态类和非主线程调用 简而言之 我有一个类 sapp 它有另一个静态类 tobj 作为静态成员 为了避免静态顺序初始化失败 tobj 在 sapp 的方法中声明 该方法又返回 tobj 实例的指针 我的问题是 tobj 有一个计时器 应该

  • 在VBA中将html转换为纯文本

    我有一个 Excel 工作表 其中的单元格包含 html 如何批量将它们转换为明文 目前有很多无用的标签和样式 我想从头开始写它 但如果我能得到纯文本 那就容易多了 我可以编写一个脚本将 html 转换为 PHP 中的纯文本 所以如果您想不

  • 在 Scala 中使用 Some() 和 Option()

    我一直在与 Scala 中解析 JSON 字符串的函数式方法的概念作斗争 并且在返回 Option something 的情况下碰壁了 我提出了这个问题 https stackoverflow com questions 9289647 a

  • MVC Razor for 循环

    我有这段代码 嵌套在表单帖子内 但我不断收到错误 它缺少结束语 for int i 0 i lt itemsCount i

  • 无法通过Anaconda/jupyter获取MNIST数据库

    Hu guys 我是 python anaconda jupyter numPy panda 等的新手 所以如果这是一个非常愚蠢的问题 请原谅我 我正在尝试使用 anaconda jupyter 获取 MNIST 数据库 但每次我最后都会收

  • Java 中的引用变量里面有什么？

    我们知道对象引用变量保存表示访问对象的方式的位 它不保存对象本身 但保存诸如指针或地址之类的东西 我正在阅读 Head First Java 第 2 版 一书 书中写道 第 3 章第 54 页 在 Java 中我们并不真正知道什么是 在引用

  • 如何在一个 TextBox 中进行算术运算？

    例如我写在TextBox1 4 5 or 3 2 如何让答案出现在同一个文本框中 我尝试了这个 但无论如何它都不起作用 Private Sub Button1 Click sender As Object e As EventArgs Ha

  • 同步 gRPC 客户端同步/异步服务器

    我只是好奇 异步 gRPC 服务器是否支持多个客户端的连接 如果不是 异步的可以吗 以及异步服务器 同步客户端的组合 甚至可能吗 是的 同步 gRPC 支持开箱即用的多个连接客户端 我亲自测试了多达 2000 个同时连接的客户端到一个用 G

  • 从 select2 选定选项获取属性值

    我正在使用 Select2 插件http ivaynberg github io select2 select2 latest html http ivaynberg github io select2 select2 latest htm

  • PostgreSQL 中的字符串匹配

    我需要在 PostgreSQL 8 4 中实现正则表达式 据我理解 匹配 似乎正则表达式匹配仅在 9 0 中可用 我的需求是 当我给出输入时14 1我需要得到这些结果 14 1 1 14 1 2 14 1 Z 但排除 14 1 1 1 14

  • 如何找到与日期范围最重叠的时间段

    假设您有一个包含标识符 开始时间和结束时间的表 这些开始和结束时间可以是任意时间长度 开始时间始终早于结束时间 假设没有空值 什么样的查询会告诉我最 流行 的时间 即每行中的两个范围与大多数其他行重叠的位置 它的实际应用是它是一个记录用户登

  • 如何将目录导入为 python 模块

    如果有目录 home project aaa 我知道它是一个Python包 那么 我如何通过知道它的路径来导入这个模块 这意味着 我希望代码能够正常工作 aaa load module home project aaa 我知道的唯一方法是

  • 执行选项卡切换时避免重新创建相同的视图

    目前 我有 2Fragments 可通过以下方式切换ActionBar s tab getSupportActionBar setNavigationMode ActionBar NAVIGATION MODE TABS ActionBar

  • 对其他元素值的 XSD 限制

    是否可以在 XSD 文档中对其他元素值进行限制 例如 我有国家和州元素 如果国家 地区等于美国 那么我需要限制指定枚举的状态元素值 否则状态可以只是固定长度的字符串 当前 XSD 的示例 始终将状态限制为枚举

  • GWT 和身份验证

    保护 GWT Tomcat 应用程序执行身份验证和授权的最佳策略是什么 有两种基本策略 确保入口点安全 确保远程服务的安全 确保入口点安全 最简单的方法是使用常规 Web 应用程序安全工具限制对 GWT 生成的 html js 文件的访问

  • 仅在第一次使用 localStorage 加载网站时显示 DIV

    我正在尝试完成这项工作 但我遇到了一些问题 就像标题所说 我希望仅在第一次加载网站时显示 DIV 我知道如何使用 PHP 和 Cookie 但我想要使用 localStorage 函数 这是我的代码 div div document rea

  • 使用scrapy到json文件只得到一行输出

    好吧 我对一般编程很陌生 并且具体使用 Scrapy 来实现此目的 我编写了一个爬虫来从 pinterest com 上的 pin 获取数据 问题是我以前从我正在抓取的页面上的所有引脚获取数据 但现在我只获取第一个引脚的数据 我认为问题出在

  • 将引用托管代码中分配的内存的指针传递给非托管代码

    我在 C 中分配了一个大的 char 缓冲区 并且希望将指向此数据的指针传递给 DLL 中的未管理的 c 函数 现在我认为要使其工作 必须修复字符缓冲区 以便 GC 在函数工作时无法移动它 如果是这样 我会声明缓冲区已固定并调用 UNSAF

  • 如何在 Scala 中将文件读取为字节数组

    我可以找到大量示例 但它们似乎要么主要依赖于 Java 库 要么只是读取字符 行 等 我只想读入一些文件并获取带有 scala 库的字节数组 有人可以帮助我吗 Java 7 import java nio file Files Paths

  • Twitter Bootstrap 3 的 IE8 问题

    我正在使用新的 Twitter Bootstrap 创建一个网站 该网站看起来不错 并且可以在除 IE8 之外的所有必需浏览器中运行 在 IE8 中 它似乎显示移动版本的元素 但在我的桌面的整个屏幕上延伸 我相信我遇到的问题是 Twitte

热门标签