页面模板

<!DOCTYPE html>

 2 <html>

 3     <head>

 4         <meta charset="UTF-8">

 5         <meta http-equiv="X-UA-Compatible" content="IE=edge">

 6         <meta name="description" content="本网站的目的是....." />

 7         <meta name="keywords" content="作品集,素材库" />

 8         <meta name="author" content="郭菊锋,xing.org1^">

 9         <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

10         <!--H5页面窗口自动调整到设备宽度，并禁止用户缩放页面-->

11             <title>title</title>

12                 <link rel="Bookmark" href="img/logo-q.png" />

13                 <link rel="apple-touch-icon" href="img/logo-q.png" />

14         <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

15         <link rel="icon" href="favicon.ico" type="image/x-icon" />

16 <!--以上四个link是兼容不同浏览器的、用以加载标题处图标logo的写法-->

17         <link rel="stylesheet" href="css/自己的css文件.css" />

18

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

20         <!--IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame。视情况添加。

21         -->

22         <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries，翻译过来就是让ie8及以下支持html5用法和media写法 -->

23         <!--[if lt IE 9]>

24 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

25 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

26 <![endif]-->

27     </head>

28         <body>

29         </body>

30 </html>

rgba使用后，也要用这个filter兼容ie

.rgba{

    background: rgba(0,0,0,0.4);

    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000);/*40000000 40表示透明度，不透明为FF 000000表示颜色，此为黑色*/

}

半透明opacity：

 .opacity{

     opacity: 0.5;

     filter: alpha(opacity=50);/*这个可能不对,不完整*/

     -moz-opacity: 0.5;

     -khtml-opacity: 0.5;/*这个不知道干嘛的*/           filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50)/*对，ie的*/

 }

和上边一样的filter的各种兼容

.filter {

    filter: progid: DXImageTransform.Microsoft.Alpha(style=0,     opacity=50);

    filter: alpha(opacity=50);

    opacity: 0.5;

    -moz-opacity: 0.5;

    -khtml-opacity: 0.5;

}

css链接背景图：

.bgpic{

    background: url(../image/btn_show.png);

    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="../image/btn_show.png");

    _background: none;

}

关于可伸缩性盒布局box-flex的

/*父元素-横向排列（主轴）*/

.box {

    display:box; /*（伸缩盒最老版本）*/

    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser,         older WebKit browsers. */

    display: -moz-box; /* 老版本语法: Firefox (buggy) */

    display: -ms-flexbox; /* 混合版本语法: IE 10 */

    display: -webkit-flex; /* 新版本语法: Chrome 21+ */

    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */

}

/* 子元素—平分比例 */

.boxflex {

    -prefix-box-flex:; /* old spec webkit, moz */

    -webkit-box-flex: 1.0; /* OLD - iOS 6-, Safari 3.1-6 */

    -moz-box-flex: 1.0; /* Firefox 19- */

    -ms-flex:; /* IE 10 */

    box-flex: 1.0;

    -webkit-flex: 1.0; /* Chrome */

    flex:; /* NEW, Opera 12.1, Firefox 20+ */

    width:;/*解决兼容性问题*/

}

inline-block的ie模式

.inlineblock {

    display: inline-block;/* firefox等标准浏览器识别*/

    *display: inline;/* 只有ie6和ie7识别*/

    *zoom:;/* 触发ie6和ie7下的haslayout */

    zoom:; /* 另一种是不加星号的，我觉得还是加星号吧，因为*只ie6/7识别，而标准的浏览器又不需要这么废话 */

}

—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— 2016-12-26  11:04:31

2017-04-19  11:07:22

 ie下对清楚浮动的处理

先说点废话吧：

昨天做了一个后台的页面，今天没事就测测ie的兼容性。

恰巧遇到群里一个同学说，float：left在ie8下不兼容，然后大家谈到用inline-block，我就来复习了下inline-block的兼容：

于是顺便把最近的一个重点再在这里记载以下，以防以后走弯路吧。

说说ie下浮动后错位导致和正常浏览器观看效果不一致的现象吧：

经过仔细观察，是因为清楚浮动在ie下没有效果的原因，

我把内部浮动元素删掉以后，外表的框就可以被撑起来了，效果也就和普通浏览器没有区别了。

后来我想，换一种方法，把外边框定死高度，然后依旧该浮动的浮动，勉强撑过这一关。

但是以后，ie不能定死高度的情况下怎么办？

看来是我清楚浮动的类clearfix的内部代码没有写兼容处理的原因啊。

我在这个页面的写法

/*清除浮动*/

 .clearfix:before,

 .clearfix:after {

 content: "";

 display: table;

 }

 .clearfix:after {

 clear: both;

 }

其他搜集的比较有用的

清楚浮动方法

第一种写法：

 .clearfix:after{

     content: "";

     clear: both;

     display: block;

 }

 .clearfix{

     *zoom:;

 }

也是我常用的一种方法。

第二种：/*清除浮动*/写法

 .clearfix:after {

     content: "";

     clear: both;

     display: block;

     height:;

     visibility: hidden;

     font-size:;

  }

 .clearfix { *zoom:;}

这种写的比较全面，把样式都格式掉了的感觉，

多一句也没有害处，目前也没观察出多这几句的好处。

所以我还是个人倾向第一种写法。

总结就是：我自己当前版本的页面中少写了一个：.clearfix { *zoom:1;}

结果就导致ie姥爷的难受

涉及到浮动的地方都会和正常浏览器不一致。。。。

看来这不能省啊。

——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

2016-12-26  11:04:31

以下片段转自分享：http://blog.csdn.net/songylwq/article/details/6033567

CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和Firefox存在很大的解析差异，这里介绍一下兼容要点。

常见兼容问题：

1、DOCTYPE 影响 CSS 处理
2、FF：div 设置 margin-left， margin-right 为 auto 时已经居中，IE 不行
3、FF: body 设置 text-align 时， div 需要设置 margin: auto(主要是 margin-left，margin-right) 方可居中
4、FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width
5、FF: 支持 !important， IE 则忽略， 可用 !important 为 FF 特别设置样式
6、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
7、cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
8、FF: 链接加边框和背景色，需设置 display: block， 同时设置 float: left 保证不换行。参照 menubar， 给 a 和 menubar 设置高度是为了避免底边显示错位， 若不设 height， 可以在 menubar 中插入一个空格。
9、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：
div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div{maring:30px;margin:28px} 重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
10、IE5 和IE6的BOX解释不一致
IE5下
div{width:300px;margin:0 10px 0 10px;} div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px} 关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持。
11、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;} 就能解决大部分问题

这里还有一篇大神总结的兼容性文章，专门针对IE浏览器(IE6-11)，链接如下：

http://www.cnblogs.com/liuzhendong/p/4309790.html

以下是脚本之家的几篇文章，对于css hack 有很明确、详细的说明，值得收藏：

一、div+css通用兼容性代码整理：http://www.jb51.net/css/43686.html

二、史上最全的CSS hack方式一览(兼容多浏览器)：http://www.jb51.net/css/493362.html

三、CSS hacker使用小结(兼容IE6、7、8)：http://www.jb51.net/css/493363.html

四、比较全的CSS浏览器兼容问题整理总结：http://www.jb51.net/css/9707.html

CSS-各种cs样式之浏览器兼容处理方式汇总大全（更新中...）的更多相关文章

  1. webpack3中使用postcss-loader和autoprefixer给css3样式添加浏览器兼容

    1.在webpack中需要处理css必须先安装如下两个loader npm install --save-dev css-loader style-loader 2.要处理sass和添加浏览器前缀需要 ...

  2. 在不同的浏览器使用不同的css样式,解决浏览器兼容问题

    区别IE6与FF:       background:orange;       *background:blue; 区别IE6与IE7:       background:green !import ...

  3. 有关css和js针对不同浏览器兼容的问题

    首先谈一下浏览器,虽然现在ie依然是浏览器市场的老大,大约占有67%的份额,但是由于其各方面的欠缺,用户开始选择其他浏览器作为自己浏览网页的主要 工具,比如firefox.theworld.maxth ...

  4. js+css:43种常见的浏览器兼容性问题大汇总

    javascript 1.HTML对象获取问题 FireFox:document.getElementById(“idName”); ie:document.idname或者document.getE ...

  5. css布局 - 九宫格布局的方法汇总（更新中...）

    目录: margin负值实现 祖父和亲爹的里应外合 换个思路 - li生了儿子帮大忙. 借助absolute方位值,实现自适应的网格布局 cloumn多栏布局 grid display: table: ...

  6. css - 文字元素等的美化效果代码汇总（更新中...）

    投影的设置 -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparen ...

  7. 通过JS加载XML文件，跨浏览器兼容

    引言 通过JS加载XML文件,跨多种浏览器兼容. 在Chrome中,没有load方法,需要特殊处理! 解决方案 部分代码 try //Internet Explorer { xmlDoc=new Ac ...

  8. Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容

    1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...

  9. 转：【总结】浏览器CSS Hacks汇总，浏览器兼容方式CSS Hacks

    [总结]浏览器CSS Hacks汇总   浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...

随机推荐

  1. Atitit.数据检索与网络爬虫与数据采集的原理概论

    Atitit.数据检索与网络爬虫与数据采集的原理概论 1. 信息检索1 1.1. <信息检索导论>((美)曼宁...)[简介_书评_在线阅读] - dangdang.html1 1.2. ...

  2. ListView之点击展开菜单

    一.概述 ListView点击item显示菜单是要实现这样的效果: 需要实现的逻辑如下: 1)点击一个普通item,展开当前菜单,同时关闭其他菜单 2)点击一个已展开的菜单,隐藏当前菜单 3)将展开菜 ...

  3. Lambda表达式的诞生过程

    这是一篇很经典的文章,解决了工作中一些使用过但是又不太明白的知识点,今天终于弄明白了.花了一晚上重新整的,坚决要分享出来!!! 那得从很久很久以前说起了,记得那个时候... 懵懂的记得从前有个叫委托的 ...

  4. jsTree简单应用Demo

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  5. ASP.NET MVC Filters 4种默认过滤器的使用【附示例】

    过滤器(Filters)的出现使得我们可以在ASP.NET MVC程序里更好的控制浏览器请求过来的URL,不是每个请求都会响应内容,只响应特定内容给那些有特定权限的用户,过滤器理论上有以下功能: 判断 ...

  6. CentOS安装JDK-1.7

    注:以下所有操作均在CentOS 6.5 x86_64位系统下完成. #准备工作# 准备用rpm下载前,看系统是否已经安装有JDK,如果没有则进入正式安装步骤. # rpm -qa | grep jd ...

  7. vsftpd安装配置 530 Permission denied.错误

    yum install vsftpd service vsftpd start 530 Permission denied.错误 /etc/vsftpd/user_list    该文件里的用户账户在 ...

  8. 取消chrome浏览器下input和textarea的默认样式；html5默认input内容清除“×”按钮去除办法

    取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...

  9. 1-1 Linux系统安装

    虚拟机下配置网络时 rhel7.2安装新建虚拟机内存2G CPU 1核2线 硬盘20G存为单个文件 使用ISO镜像 桥接网卡引导界面:    Install Red Hat Enterprise L ...

  10. Struts2入门案例

    struts2最简便的案例   Struts 2是一个MVC框架,以WebWork框架的设计思想为核心,吸收了Struts 1的部分优点.Struts 2拥有更加广阔的前景,自身功能强大,还对其他框架 ...