华丽的bootstrap3碰到土鳖IE6
之前由于看好很容易上手的bootstrap,然后用这个框架写了个网站,对于不会美工和细致设计的攻城师来说,bootstrap是个界面设计的瑞士军刀,三下五除二就能搞定个不算太丑的页面。
吭哧吭哧工作了一阵,网站功能基本完工,最后要发布时发现要有点麻烦,毕竟当前还是有很大一部分用户生活在IE6\7\8的世界中,真心希望他们能过上好日子。
攻城师就是解决问题的,因此为了能够使古老的IE能够穿上华丽的服装,就只好着手改造一下,修补一下当前的页面,使其不至于惨不忍睹。网上已经有关于让bootstrap适应ie6的解决方案,叫做鄙视IE(bsie),Bootstrap IE6 兼容库,奈何目前我的网站是用bootstrap3编写的,那个鄙视IE是针对bootstrap2.x编写的,但万变不离其宗,就参考鄙视IE的写法,再结合自己的项目做些修改。
工作还在进行中,但思路确定之后只是时间的问题,不至于一开始看到四分五裂的页面时的恐惧与担忧。
其实bootstrap3对于ie8的支持还可以,只要加入类似如下的JS,在ie8中大致能看,需要修改的也只是很少的局部。
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
大致用到的对于IE的css hack方式为:
.brand{
*border-width: 0;
}
div.col-sm-offset-2{
_margin-left: 8.8%;
}
.nav li {
float: left;
}
也就是“_”:只有IE6才认识,“*”:IE6和IE7都认识,其它的就以if lt IE 8之类的语句来包含针对特定IE浏览器版本的css或js。
另外别忘记定义html的doctype,没有这个标记,版面布局会处于一个很莫名其妙的状态中,调试了老半天大概都不知道是什么情况:<!DOCTYPE html>
华丽的bootstrap3碰到土鳖IE6的更多相关文章
- selenium之多线程启动grid分布式测试框架封装(二)
五.domain类创建 在domain包中创建类:RemoteLanchInfo.java 用来保存启动信息. package com.lingfeng.domain; public class Re ...
- IE8"开发人员工具"使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)
来源: http://www.cnblogs.com/JustinYoung/archive/2009/04/03/kaifarenyuangongju2.html 在上一篇文章IE8“开发人员工具” ...
- 解决ie6上碰到的css兼容问题
ie6上css碰到的坑 前两天在给一个项目做东西的时候,碰到一个有意思的项目,是需要兼容ie6,有一些碰到并且解决的问题,给大家写下来,方便大家以后碰到类似的问题哈- 喜欢的话还请点赞! 1.impo ...
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
首先需要确保你的HTML页面开始部分要有DOCTYPE声明.DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,具体会影响:对标记attributes .propertie ...
- 作业总结(一):IE6下面的那些坑
考完试就来实习的公司实习了,大概最近有两周时间就一直在做公司给新人布置的大作业.虽然只是很简单的一个小的项目,但却从其中总结到了不少有用的东西.计划将其发出来一系列文章,算是对这两周时间的总结.也算是 ...
- IE6 7下常见CSS兼容性处理
以下是一些比较常见的IE6 7下的兼容性问题. 在当下这个时代,其实我们几乎可以不用再去针对IE6做兼容性的处理,除非你的公司还是诡异的要求你兼容到IE6.但是了解一些常见的兼容性问题还是可以帮助我们 ...
- 如何在 ie6 中使用 "localStorage"
好吧,我只是个标题党,ie6 下根本无法使用跟 h5 沾边的 localStorage.今天要向大家介绍的是 ie 特有的 userData 的存储方式,并且对它进行封装,使得不支持 localSto ...
- [转] IE6中请求莫名中断
这两天碰到的问题,IE6下某个js生成的a节点,设置了href="javascript:;",点击时触一个ajax请求,但在IE6下就是无法执行succese里的内容,所以就用se ...
- 【css】ie6 和 ie7 下 position 与 overflow 的问题
前几天做的项目中碰到这样一个问题,在 ie6 和 ie7 下,给父元素设置 overflow:hidden 不起作用无法隐藏,后来发现是子元素中有设置 position:relative,如果子元素删 ...
随机推荐
- 获取CentOS系统详情的九个uname命令实例
当你在控制台模式下,无法通过“鼠标右键 > 关于”获取操作系统的信息.这时,在Linux下,你可以使用uname命令,帮助你完成这些工作. Uname是unix name的缩写.在控制台中实际使 ...
- CentOS查看系统信息命令和方法
收集整理的一些linux查看系统信息的命令和方法: 一.linux查看服务器系统信息的方法: 1.查看主机名/内核版本/CPU构架: # uname -n -r -p -o localhost.loc ...
- swift:入门知识之泛型
在尖括号里写一个名字来创建一个泛型函数或者类型 例如<T>.<Type> 可以创建泛型类.枚举和结构体 在类型后使用where来指定一个需求列表.例如,要限定实现一个协议的类型 ...
- struts使用html:file上传文件的时候文件名乱码解决
<body> <html:form action="/jwid/struts1x/15.3/form/upload.do?action=upload" encty ...
- rc.local自启动学习(转)
linux有自己一套完整的启动体系,抓住了linux启动的脉络,linux的启动过程将不再神秘. 本文中假设inittab中设置的init tree为: /etc/rc.d/rc0.d/etc/rc. ...
- java web每天定时执行任务
第一步: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 ...
- 《c程序设计语言》读书笔记--闰年和字符输入不用 && ||
#include <stdio.h> #include <string.h> #define sta 1500 #define Num 1600 int main() { in ...
- 下拉刷新控件(1)PullToRefreshList示例
有很多控件都可以下拉刷新如,ListView,ExpandableListView,GridView,ScrollView,ViewPager,WebView等, 其中最常见的是ListView.本文 ...
- grep/awk/sed 或者 并且 否定
Grep 'OR' Operator Find all the lines in a file, that match any of the following patterns. Using GRE ...
- 【转】Android横竖屏切换问题
Android横竖屏切换总结(Android资料) Android横竖屏要解决的问题应该就两个: 一.布局问题 二.重新载入问题 1.布局问题:如果不想让软件在横竖屏之间切换,最简单的办法就是在项目的 ...