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这个属性是定义“不显示超过对象尺寸的内容”

原文地址:https://www.cnblogs.com/chenyt/p/1889318.html