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. 并发之AtomicInteger

    并发之AtomicInteger 1 java.util.concurrent.atomic概要     在java.util.concurrent.atomic包下存在着18个类,其中Integer ...

  2. 基于unity3d IFC的虚拟仿真系统

  3. STM32 C++编程 004 Adc (数模转换)类

    使用 C++ 语言给 STM32 编写一个 Adc 类 我使用的STM32芯片:STM32F103ZET6 我们使用的STM32库版本:V3.5.0 注意: 想学习本套 STM32 C++编程 的专栏 ...

  4. 关于photoshop处理图片的自动化

    如果打印一个图片我们只需要点击几个按钮就可以完成了,但如果有100多个图片需要打印,那就需要点击几百次按钮,而且这个过程中有很多操作是相同的.能不能简化这个过程呢?是可以的,在photoshop中实现 ...

  5. R: 关于 ggplot2 的初探

    生活还很长,别急,慢慢来.亲爱的 require(ggplot2)p1 <- ggplot(mpg, aes(displ, hwy)) + geom_point() ; p1p1 + scale ...

  6. noi.ac day1t3 Sort

    传送门 分析 快排的原理是以任意一个数为标准,然后把所有小于它的数换到它的左边,所有大于它的数换到它的右边.我们就使用快排的思路,分治整个区间.对于每个区间以排好序的这个数列的中间位置的值为标准,然后 ...

  7. SDUT 2142 数据结构实验之图论二:基于邻接表的广度优先搜索遍历

    数据结构实验之图论二:基于邻接表的广度优先搜索遍历 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Descript ...

  8. 问题:org.hibernate.LazyInitializationException: failed to lazily initialize

    今天搞了一上午,都在解决这个问题:org.hibernate.LazyInitializationException: failed to lazily initialize 原因很简单,是在非法的s ...

  9. TCP/IP的三次握手和四次放手

    一开始个人对于三次握手和四次挥手这个东西还是有时候会忘记,可能理解的不是非常深刻,所以今天就自己动手来记录一下这个知识点,方便以后查看.总结完之后发现总结的还是可以的哈哈. 三次握手建立连接 第一次: ...

  10. Java50道经典习题-程序24 根据输入求输出

    题目:给一个不多于5位的正整数,要求:一.求它是几位数,二.逆序打印出各位数字.分析: (1)利用随机函数产生[1,99999]之间的一个正整数n (2)将n转换成字符串s,调用字符串的length( ...