zoukankan      html  css  js  c++  java
  • CSS Hack及常用的技巧

    何谓CSS Hack?

    不同的浏览器,比如Internet Explorer 6、Internet Explorer 7、 Mozilla Firefox对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。此时我们需要针对不同的浏览器写不同的CSS,让它能够兼容不同的浏览器,能够在不同的浏览器中得到我们想要的页面效果。针对不同浏览器编写不同CSS code的过程就叫CSS Hack,或叫写CSS Hack。

    不同浏览器对CSS解析的差别如下: 

    • !important能被IE7、FF识别,但不能被IE6识别
    • IE6支持"*" or "_"开头的CSS,IE7支持"*"开头的CSS,但不支持"_"开头的CSS,FF两者都不支持
    • "+"开头的CSS样式仅能被IE7识别
    • ""结束的CSS样式仅能被IE8识别
    • "9"的CSS样式能被IE识别
        【书写顺序:针对FF的样式放在最前面,针对IE7的样式放在中间,针对IE6的样式放在最后 】

     1. !important

    !important 指定样式应用规则的优先权,区别IE6与IE7,区别IE6与其它浏览器。

    .browserTest 
    { 
        border
    :20px solid #60A179 !important;
        border
    :20px solid #00F;

    IE7和其它标准浏览器能识别!important,显示#60A179颜色,IE6不能识别!important,显示#00F颜色。

     2. *

    IE都能识别"*",标准浏览器(如FF)不能识别"*"。

    区别IE与FF:

    .browserTest  

    {    border:20px solid #60A179;    

         *border:20px solid #00F;

    }

      区别IE6、IE7、FF:

    .browserTest
    {
        border
    :20px solid #60A179;
        border
    :20px solid #00F !important;
        *border
    :20px solid #fff;

    3. _

    IE6支持"_",IE7和FF都不支持"_" 。区别IE6、IE7、FF:

    .bowserTest {       

        border:20px solid #60A179;

        *border:20px solid #00F;   

        _border:20px solid #fff;

    }

    4. *+html 与 *html

      *+html 与 *html 是IE特有的标签, firefox 暂不支持。而*+html 又为 IE7特有标签

    .browserTest { width: 120px; }      /* FireFox fixed */ 
    *html .browserTest 
    { width: 80px;}  /* ie6 fixed */ 
    *+html .browserTest 
    { width: 60px;} /* ie7 fixed */

      *+html 对IE7的HACK 必须保证HTML顶部有如下声明:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  • 相关阅读:
    ubuntu配置服务器环境
    discuz安装与学习资料
    前端面试题总结(一)
    css公共样式,初始化
    js的解析--预处理(三)
    sass的安装与基础
    移动开发学习笔记(一) 移动开发的注意事项
    移动前端一些常用的框架
    JavaScript的构造器与对象(二)
    JavaScript 中的Object的使用详解笔记(一)
  • 原文地址:https://www.cnblogs.com/sun-mile-rain/p/4016341.html
Copyright © 2011-2022 走看看