• bootstrap3 兼容IE8浏览器 2016-01-22 14:01:38
    近期在使用bootstrap这个优秀的前端框架,这个框架非常强大,框架里面有下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等,bootstrap都已经预先定义好了...

    近期在使用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>

    注:写成<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">是不可行的

    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文件

    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">

    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库

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

    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版本,再引入

    <script type="text/javascript" src="js/bootstrap/jquery.placeholder.js"></script>

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

    <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里的不等于判断符相同

    2、bootstrap3相关css、js

    下载地址:http://pan.baidu.com/s/1getpDjt

    jquery.placeholder.js文件的下载地址https://github.com/mathiasbynens/jquery-placeholder

    展开全文
  • Bootstrap3 Bootstrap4 Less预处理 Sass预处理 bootstrap3 共有4种栅格类,依次是: 特小(col-xs-) (<=768px) 小(col-sm-) (>=768px) 中(col-md-) (>=992px) ...
  • bootstrap 样式不兼容 2016-11-12 05:30:56
    使用bootstrap 进行布局,在火狐浏览器都正常,但是在Google、Opera 上都表现出一样的结果,求大神指点。。
  • Bootstrap浏览器兼容 2017-01-16 14:22:54
    说到浏览器兼容性,就不得提国内的...自从推出了Bootstrap3以后,整个框架对于低级浏览器的兼容性更是不忍直视,所以如果你的项目牵涉到IE8、IE7,甚至是IE6,那么就可以好好考虑是否还要执着于Bootstrap3了(当然,
  • 以下为bootstrap3的浏览器支持情况: 转载于:https://www.cnblogs.com/niyingi/p/7487977.html
  • 在css中加入 [data-toggle~=“collapse”]{ cursor:pointer; }
  • 一、作为一个之前没有真正实践项目的前端新手,这次在实践的时候就发现了一个严重的问题——兼容性。 开发者在前端开发,调试的时候,使用的基本都是谷歌、火狐这种开发者浏览器,忽略了其实我们国内主流的浏览器...
  • 解决bootstrap 3 IE8兼容性问题 研究了下getbootstrap.com网站在IE8下是正常的,他们采取的解决办法是: <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <!--...
  • Bootstrap 3兼容IE8浏览器 2016-07-07 14:44:31
    1、本地调试需要Web Server(如IIS、Apache,Nginx),单纯地本地打开文件能看到兼容效果。 2、如果你发现已经引用了respond.js和Bootstrap,仍无效果,请查看你的Bootstrap是否使用了CDN文件。(详情看第4点) ...
  • 百度地图与bootstrap样式不兼容的问题 当在页面div用百度地图时,出现显示地图内容的问题。 bootstrap.css的样式里有放map(allmap)的样式,用地图的时候使用id=“map_canvas” 就行了 #map_canvas img { max-width...
  • 这两天在做一个新的系统,从原有系统基础上进行修改,原来用的是Bootstrap2,现在升级到Bootstrap3,但是部分UI元素出现了不兼容的问题,比较麻烦的是分页这个功能: 配合的是Angular JS,原来的分页功能,现在还能...
  • bootstrap-treeview 是bootstrap的一个树形插件,插件依赖: ...经过验证,它可以在 bootstrap 高于3.3.7 版本中使用,当前 treeview 的版本为bootstrap-treeview/1.2.0 ,bootstrap/3.3.7 <link href="https...
  • Bootstrap 解决ie兼容性问题 2018-01-18 15:55:37
    本文转载,请尊重原创。首先需要确保你的HTML页面开始部分要有DOCTYPE声明。DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,具体会影响:对标记attributes 、properties的约束规则对浏览器的渲染模式...
  • 我自己做了一个网站,使用的是bootstrap技术作为设计界面,但是使用360浏览器的时候,出现了图片不兼容的问题,总的来说是网页出现了不兼容的问题。 我的网站解决方法:在页面中加入了一个meta的标签<meta ...
  • bootstrap是在html5的基础上实现的,要想让IE8兼容,首先要让器兼容html5 ,然后兼容bootstrap,在head中加入以下代码: 最好加载引用额css后边 &lt;!-- IE8兼容性处理代码 begin--&gt; &lt;!--[if ...
  • 关于bootstrap兼容性和轮播图能手动滑动
  • 解决bootstrap兼容性问题 2016-06-03 10:45:15
    ,Chrome=1" /> <link rel="stylesheet" href="<%=basePath%>css/bootstrap.min.css
1 2 3 4 5 ... 20
收藏数 31,215
精华内容 12,486