zoukankan      html  css  js  c++  java
  • IE6、IE7、Firefox之间的兼容写法

    1、 IE6、IE7、Firefox之间的兼容写法:
      
      写法一:
      
      IE都能识别*;标准浏览器(如FF)不能识别*;
      IE6能识别*,但不能识别 !important,
      IE7能识别*,也能识别!important;
      FF不能识别*,但能识别!important;
      根据上述表达,同一类/ID下的CSS  hack可写为:
      .searchInput {
      background-color:#333;/*三者皆可*/
      *background-color:#666 !important; /*仅IE7*/
      *background-color:#999; /*仅IE6及IE6以下*/
      }
      一般三者的书写顺序为:FF、IE7、IE6.
      
      写法二:
      
      IE6可识别“_”,而IE7及FF皆不能识别,所以当只针对IE6与IE7及FF之间的区别时,可这样书写:
      .searchInput {
      background-color:#333;/*通用*/
      _background-color:#666;/*仅IE6可识别*/
      }
      
      写法三:
      
      *+html 与 *html 是IE特有的标签, Firefox 暂不支持。
      .searchInput {background-color:#333;}
      *html .searchInput {background-color:#666;}/*仅IE6*/
      *+html .searchInput {background-color:#555;}/*仅IE7*/
      
      屏蔽IE浏览器:
      
      select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。
      
      *:lang(zh) select {font:12px !important;} /*FF的专用*/
      select:empty {font:12px !important;} /*safari可见*/
      
      IE6可识别:
      
      这里主要是通过CSS注释分开一个属性与值,注释在冒号前。
      
      select { display /*IE6不识别*/:none;}
      
      IE的if条件hack写法:
      
      所有的IE可识别:Only IE


      只有IE5.0可以识别:Only IE 5.0


      IE5.0包换IE5.5都可以识别:Only IE 5.0+


      仅IE6可识别: Only IE 6-


      IE6以及IE6以下的IE5.x都可识别:Only IE 6/+


      仅IE7可识别: Only IE 7/-
      
      2、清除浮动:


      在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题。
      select:after {
      content:”.”;
      display:block;
      height:0;
      clear:both;
      visibility:hidden;

    2、火狐,IE兼容问题


    1.今天做了一个后台管理系统的登录界面,原想把登录框放在居中的位置,在body里设置了text-align:center;当在IE6,IE7里浏览时都没有出现问题,可当在火狐里浏览是问题出现了,登录框没有居中,原先也出现这样的问题,也知道这是兼容问题,但没有去深究,只是在body里设置了个宽度,再用margin:0 auto;勉强解决了这个居中的问题,但是新的问题出现了,在一个分辨率里这个问题很好解决,当用到不同分辨率的显示器上这问题就出现了,因为设置了宽度,所以不是太长就是满屏。所以今天就特意去找了一下解决这个问题的方法,方法很简单就是在body设置text-align:center,再在div里设置margin:auto(主要是margin-left,margin-right)就可以居中了。
      如:
      body{
      text-align:center;}
      div{
      margin:auto;}
      2.在IE6里当你用div设置了一个高度很小的(<20px)分割线时,在IE6里浏览时即使你设置的高度是5px,但显示的高度远大于5px,这是IE6里DIV有一个宽度和最小高度。如果高度设得比这个最小高度小还是以最小高度显示;而在IE7,8里面已经没有最小宽度和最小高度之说了。此时只要在div里样式上加上overflow:hidden就可以解决这问题。 overflow:hidden这个属性是定义“不显示超过对象尺寸的内容”

  • 相关阅读:
    SPA项目开发之动态树以及数据表格和分页
    SPA项目开发之首页导航左侧菜单栏
    SPA项目开发之登录
    使用vue-cli搭建spa项目
    Splay 平衡树
    主席树(可持久化线段树 )
    P3195 [HNOI2008]玩具装箱TOY
    P2962 [USACO09NOV]灯Lights
    【hdu4405】AeroplaneChess
    HDU3853:LOOPS
  • 原文地址:https://www.cnblogs.com/chenyt/p/1889318.html
Copyright © 2011-2022 走看看