bootstrap3 兼容IE8浏览器！_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

bootstrap3 兼容IE8浏览器！_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:02 PM

ie8兼容

近期在使用bootstrap这个优秀的前端框架，这个框架非常强大，框架里面有下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等,bootstrap都已经预先定义好了，当我们制作网页上，只需直接调用里面的css即可

　　bootstrap是一个响应式的布局，你可以在宽屏电脑、普通电脑，平板电脑，手机上都得到非常优秀的布局体验。这种响应式的布局正是通过CSS3的媒体查询（Media Query）功能实现的，根据不同的分辨率来匹配不同的样式。IE8浏览器并不支持这一优秀的Css3特性，Bootstrap在开发文档中写了如何使用进行兼容IE8,如果想兼容IE6,IE7，可以搜索bsie (bootstrap2)

　　Bootstrap在IE8中肯定不如Chrome、Firefox、IE11那么完美，部分组件不保证完全兼容，还是要Hack的

1、使用html5声明

<!DOCTYPE html>
这里不可以有空格
<html>

注：写成是不可行的

2、加入meta标签

确定显示此网页的IE版本

<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />

注:bootstrap不支持IE兼容模式，为了让IE浏览器运行最新的渲染模式，将添加以上标签在页面中，IE=edge表示强制使用IE最新内核，chrome=1表示如果安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame

3、引入bootstrap文件

复制代码代码如下:

4、引入html5shiv.min.js和respond.min.js

让不（完全）支持html5的浏览器“支持”html5标签

<!--[if lt IE 9]>
<script src="js/bootstrap/html5shiv.min.js"></script>
<script src="js/bootstrap/respond.min.js"></script>
<![endif]-->

5、添加1.X版本的Jquery库

复制代码代码如下:

6、在IE8下测试，发现一个问题placeholder不被支持，下面是解决IE支持placeholder的方法，本文引用的jquery是1.12.0测试通过，先引用jquery

<script type="text/javascript" src="js/bootstrap/jquery-1.12.0.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

也可以用其他的jquery版本，再引入

[code]
然后在文件中加入一下代码

<script type="text/javascript">
 $(function () {
  $('input, textarea').placeholder();
 });
</script>

代码总结如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
 <meta name="author" content="zhy" />
 <title>ie8</title>
 <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
 <!--[if lte IE 9]>
 <script src=js/bootstrap/respond.min.js"></script>
 <script src=js/bootstrap/html5shiv.min.js"></script>
 <![endif]-->
 <script src="js/bootstrap/jquery-1.12.0.min.js"></script>
 <script src="js/bootstrap/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>

附注：

1、IE下判断IE版本的语句

<!--[if lte IE 6]>
<![endif]-->
IE6及其以下版本可见
 
<!--[if lte IE 7]>
<![endif]-->
IE7及其以下版本可见
 
<!--[if IE 6]>
<![endif]-->
只有IE6版本可见
 
<![if !IE]>
<![endif]>
除了IE以外的版本
 
<!--[if lt IE 8]>
<![endif]-->
IE8以下的版本可见
 
<!--[if gte IE 7]>
<![endif]-->

IE7及大于IE7的版本可见
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同

以上就是本文的全部内容，希望对大家的学习有所帮助。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Win10的最稳定版本Dec 25, 2023 pm 07:58 PM

很多用户都会遇到在操作电脑的时候卡顿或者是蓝屏，这个时候我们就需要找一个最为稳定的win10版本来进行操作，整体都是非常的好用的，可以让你日常使用更为流畅。史上最稳定的win10版本1、win10正版原装系统在这里用户可以使用简单的操作，系统经过优化，具有很强的稳定性、安全性、兼容性，用户可以按照步骤实现完美机器2、俄罗斯大神精简版win10经过严格的精简操作，删除了很多不必要的功能和服务。精简后，系统的CPU和内存占用率更低，运行速度更快。3、win10精简版1909安装多台不同硬件型号的电脑

Switch2能兼容Switch卡带吗？Jan 28, 2024 am 09:06 AM

Switch2是任天堂在2023年科隆游戏展公布的新机型，一些玩家担心新出来的机型与之前版本的机型卡带会不会存在兼容性问题，下面我们一起来看看吧。switch2兼容switch卡带吗答：switch2不兼容switch卡带。Switch2卡带的介绍根据任天堂的生产链公司的消息称，Switch2可能会使用64GB的卡带。它由于性能更好，支撑更多的3A游戏大作的原因，需要更大卡带容量。因为很多的游戏作品需要阉割和压缩，才能塞进一张游戏卡带里面。而且Switch的卡带容易被复制游戏内容，所以更换新卡带

Win11是否支持动态壁纸Jan 01, 2024 pm 06:41 PM

众所周知，win11一大特色就是自带安卓子系统，让我们不需要用模拟器就可以安装安卓软件，但也存在win11安卓应用卡顿的问题，这应该怎么解决呢。win11不兼容动态壁纸么：答：win11能兼容动态壁纸，如果用不了可能是软件或系统版本落后。如果是刚更新，可能是被系统壁纸覆盖了。1、如果是系统或软件版本落后，那么更新一下系统和动态壁纸软件即可。2、如果是被系统壁纸覆盖了，可以尝试打开“设置”3、接着进入“个性化”下的“背景”设置。4、然后将个性化设置背景改为“图片”5、修改完成后就能正常设置动态壁纸

win10兼容win7的设置方法介绍Jan 03, 2024 pm 05:09 PM

很多朋友目前还在选择win7系统而不是win10系统的原因就是害怕其兼容性不好。其实，现在win10系统已经可以设置win7的兼容模式了，只需要在属性中就可以更改设置，下面就一起来看一下吧。win10怎么兼容win71、首先右键点击我们需要在win7系统下运行的程序，然后打开“属性”2、然后点击上方的“兼容性”，进入兼容性选项卡。3、在兼容模式下勾选“以兼容模式运行这个程序”4、然后就可以在下方的下拉菜单中选择“windows7”5、完了之后只需要点击“应用”或者点击“确定”就可以了。

Mingw编译的程序能否在Linux系统下正常运行？Mar 19, 2024 pm 12:03 PM

Mingw编译的程序能否在Linux系统下正常运行？许多程序员在开发过程中常常会遇到这样一个问题，即在Windows系统下使用Mingw进行编译后的程序能否在Linux系统下正常运行。本文将详细探讨这个问题，并给出具体的代码示例。首先，我们需要了解Mingw是什么以及它和Linux系统之间的差异。Mingw是一个在Windows下的开发环境，用于编译Wind

介绍win10系统与ps版本的兼容性Dec 30, 2023 pm 06:04 PM

ps也就是Photoshop，它是目前很多人都在使用的图片处理软件。很多朋友在使用ps前，可能会发现某些ps无法安装在win10系统中，怀疑是兼容的问题，因此今天小编就来给大家介绍一下win10兼容哪个版本的ps。win10兼容哪个ps答：现在几乎所有版本都能兼容，配置越高的电脑可以使用越新的版本。1、现在win10的兼容性已经很好了，只要配置足够，几乎可以兼容所有版本的ps。2、ps对于电脑配置的要求是比较高的，因此如果大家配置高的话可以使用最新版本的ps。3、如果配置不够的话，可以下载使用P

解决d3dx9_43.dll不兼容的方法Feb 24, 2024 pm 10:06 PM

d3dx9_43.dll不兼容怎么解决近年来，计算机和游戏的快速发展使得我们享受到了更多的娱乐和便利。然而，有时在安装或运行某些程序时，我们可能会遇到一些错误信息，例如“d3dx9_43.dll不兼容”。在这种情况下，我们应该如何解决这个问题呢？首先，让我们来了解一下这个错误信息的含义。d3dx9_43.dll是DirectX的一个系统文件，它是用于在操作系

处理Eclipse版本不兼容的方法Jan 04, 2024 am 10:29 AM

遇到Eclipse版本不兼容怎么办？【引言】Eclipse作为一款广受欢迎的开发工具，不仅提供了强大的功能和丰富的插件，还兼具跨平台的特性。然而，在使用Eclipse过程中，有时可能会遇到版本不兼容的问题，这可能导致程序无法正常运行或者编译错误。本文将介绍如何应对Eclipse版本不兼容的情况，并提供一些代码示例来解决常见的兼容性问题。【解决方案】更新Ecl

See all articles