CSS-各种cs样式之浏览器兼容处理方式汇总大全(更新中...)

  1. 云栖社区>
  2. 博客>
  3. 正文

CSS-各种cs样式之浏览器兼容处理方式汇总大全(更新中...)

鋒o丫头 2016-12-26 11:01:00 浏览474
展开阅读全文

页面模板

<!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:

1 .opacity{
2     opacity: 0.5;
3     filter: alpha(opacity=50);/*这个可能不对,不完整*/
4     -moz-opacity: 0.5;
5     -khtml-opacity: 0.5;/*这个不知道干嘛的*/           filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50)/*对,ie的*/
6 }

 

和上边一样的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: 1; /* 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: 1; /* IE 10 */
    box-flex: 1.0;
    -webkit-flex: 1.0; /* Chrome */
    flex: 1; /* NEW, Opera 12.1, Firefox 20+ */
    width: 0;/*解决兼容性问题*/
}

 

inline-block的ie模式

 

.inlineblock {
    display: inline-block;/* firefox等标准浏览器识别*/
    *display: inline;/* 只有ie6和ie7识别*/
    *zoom: 1;/* 触发ie6和ie7下的haslayout */
    zoom:1; /* 另一种是不加星号的,我觉得还是加星号吧,因为*只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的内部代码没有写兼容处理的原因啊。

我在这个页面的写法

/*清除浮动*/

 1 .clearfix:before,
 2 
 3 .clearfix:after {
 4 
 5 content: "";
 6 
 7 display: table;
 8 
 9 }
10 
11 .clearfix:after {
12 
13 clear: both;
14 
15 }

其他搜集的比较有用的

清楚浮动方法

第一种写法:

 1 .clearfix:after{
 2 
 3     content: "";
 4     
 5     clear: both;
 6 
 7     display: block;
 8 
 9 }
10 
11 .clearfix{
12 
13     *zoom: 1;
14 
15 }

也是我常用的一种方法。

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

 1 .clearfix:after { 
 2     content: ""; 
 3     clear: both; 
 4     display: block; 
 5     height: 0;
 6     visibility: hidden; 
 7     font-size: 0; 
 8  }
 9 
10 .clearfix { *zoom:1;}

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

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

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

总结就是:我自己当前版本的页面中少写了一个:.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

网友评论

登录后评论
0/500
评论
鋒o丫头
+ 关注