css3

1.box-shadow:

filter:progid:DXImageTransform.Microsoft.Shadow(color=#,direction=,strength=);/*兼容ie*/

-moz-box-shadow: 2px 2px 10px #;/*兼容firefox*/

-webkit-box-shadow: 2px 2px 10px #;/*兼容safari或chrome*/

box-shadow:2px 2px 10px #;/*兼容opera或ie9*/

2.background-size  //兼容IE8，需要引用backgroundsize.min.htc

　background:url(images/.jpg) center no-repeat;

  background-size:cover;

　-ms-behavior:url(backgroundsize.min.htc);//相对路径

　behavior:url(backgroundsize.min.htc);//相对路径

3.css透明问题

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=,opacity=)。

FF：opacity:0.6

4.浏览器bug

4.1 IE的双边距bug

　　设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。

　　解决方案：在这个div里面加上display:inline;

4.2 高度不适应

　　高度不适应是当内层的对象高度发生变化时，外层高度不能自动进行调节，特别当内层对象使用margin或者padding时。

　　例如：

.box p{

　　　margin-top:20px;

　　　margin-bottom:20px;

　　　text-align:center;

}

　<div class="box">

　　　<p>p对象中的内容</p>

　</div>

　　解决方法：在P对象上下各加2个空的div对象，css代码： {height:0;overflow:hidden}，或者为div加上border属性。　　

<!DOCTYPE html>

<html>

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title></title>

　　　　<style>

　　　　/*.box{

　　　　　　border:1px solid red;

　　　　}*/

　　　　.box div{

　　　　　　height:0px;

　　　　　　overflow:hidden;

　　　　}

　　　　.box p{

　　　　　　margin-top:20px;

　　　　　　margin-bottom:20px;

　　　　　　text-align:center;

　　　　}

　　　　</style>

　　</head>

　　<body>

　　　　　<div class="box">

　　　　　　　<div></div>

　　　　　　　　　<p>p对象中的内容</p>

　　　　　　　<div></div>

　　　　　</div>

　　</body>

</html>

css兼容写法的更多相关文章

  1. 浏览器 CSS 兼容写法的测试总结

    做前端最讨厌的就是 IE6,7,8,虽然被淘汰的浏览器,但是在中国用户仍然很多,不可能像国外网站一样直接就不管它了,这样会流失很多流量啊. 现在有了IE9,IE10还好些,几乎和 Chrome,Fir ...

  2. DIV水平垂直居中的CSS兼容写法

    DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...

  3. IE浏览器兼容问题(上)——html和css的兼容写法

    用户使用的浏览器五花八门,我们要保证每一种浏览器都能兼容我们的代码,不能要求用户去改变浏览器,那么就得在我们的代码上下功夫.此时我们要用到hack. HACK就是针对不同的浏览器写不同的HTML.CS ...

  4. css 背景色渐变兼容写法

    最近在项目中,有很多地方都用到了线性渐变,比如:表单提交按钮的背景,数据展示的标题背景等等,按照以前的做法是切 1px 图片然后 repeat-x.下面我将介绍如何用 css 来完成该效果. css3 ...

  5. 【css】css 背景色渐变兼容写法

    最近在项目中,有很多地方都用到了线性渐变,比如:表单提交按钮的背景,数据展示的标题背景等等,按照以前的做法是切 1px 图片然后 repeat-x.下面我将介绍如何用 css 来完成该效果. css3 ...

  6. （转）css 背景色渐变兼容写法

    css3:linear-gradient 比如:黑色渐变到白色,代码如下: .gradient{ background: -moz-linear-gradient(top, #000000 0%, # ...

  7. IE和firefox火狐在JS、css兼容区别

    1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了. ...

  8. javascript阻止事件冒泡的兼容写法及其相关示例

    //阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...

  9. css兼容问题集合

    css兼容问题 兼容问题 1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白 ...

随机推荐

  1. ListView---复杂的listview显示

    1 . 初始化数据 private void fillData() { ll_loading.setVisibility(View.VISIBLE); // 显示进度 new Thread() { p ...

  2. 业务逻辑:五、完成认证用户的动态授权功能 六、完成Shiro整合Ehcache缓存权限数据

    一. 完成认证用户的动态授权功能 提示:根据当前认证用户查询数据库,获取其对应的权限,为其授权 操作步骤: 在realm的授权方法中通过使用principals对象获取到当前登录用户 创建一个授权信息 ...

  3. PCL—点云分割（RanSaC）低层次点云处理

    博客转载自:http://blog.csdn.net/app_12062011/article/details/78131318 点云分割 点云分割可谓点云处理的精髓,也是三维图像相对二维图像最大优势 ...

  4. SimpleFactoryPattern（23种设计模式之一）

    设计模式六大原则(1):单一职责原则 设计模式六大原则(2):里氏替换原则 设计模式六大原则(3):依赖倒置原则 设计模式六大原则(4):接口隔离原则 设计模式六大原则(5):迪米特法则 设计模式六大 ...

  5. 算法Sedgewick第四版-第1章基础-011一用链表实现bag、queue、stack

    1. package algorithms.ADT; /************************************************************************ ...

  6. java中怎么把String转化为字符数组呢？

    我想让用户输入一组字符串,然后将这个字符串的每一个赋给一个char.即,abcde char ch[]=new char[5]; ch[0]=a;ch[1]=b;..... 解决方案如下图所示: St ...

  7. Luogu 1081 [NOIP2012] 开车旅行

    感谢$LOJ$的数据让我调掉此题. 这道题的难点真的是预处理啊…… 首先我们预处理出小$A$和小$B$在每一个城市的时候会走向哪一个城市$ga_i$和$gb_i$,我们有链表和平衡树可以解决这个问题( ...

  8. CF 671D Roads in Yusland

    弄完之后点进去一看,竟然是div1的D题……最近真是天天被题虐哭 推荐这一篇博客 https://www.cnblogs.com/Sakits/p/8085598.html 感觉讲清楚了,也是基本照着 ...

  9. c# 的默认访问修饰符小结（转）

    c# 的访问修饰符是private 还是 internal? 准确的说,不能一概而论. [MSDN] Classes and structs that are not nested within ot ...

  10. easyUI 展开DataGrid里面的行显示详细信息

    http://blog.csdn.net/yanghongchang_/article/details/7854156原著 datagrid 可以改变它的view(视图)去显示不同的效果.使用详细视图 ...