zoukankan      html  css  js  c++  java
  • 针对不同浏览器,CSS如何写

    我们在开发DIV+CSS页面时候常常会遇到开发出的网页的一些地方在各大浏览器比如微软IE6、微软IE7、微软IE8、火狐浏览器、谷歌浏览器有一些不同,如宽度、高度等地方有相差误。
    IE6比较老的版本浏览器,用户比较多,
    IE7较新浏览器,更接近标准浏览器,
    IE8算是微软标准浏览器,但差别于浏览器,
    火狐(Mozilla, Firefox)和谷歌浏览器(chrome)是比较标准的IE浏览器,一般我们以这个浏览器为开发参考平台,同时IE8与这两个浏览器解释CSS比较接近,一般只要通过火狐、谷歌浏览器测试兼容,一般就能确定IE8.
    因此一般我们区别这些浏览器CSS hack的方法就变得简单,我们只需考虑IE6IE7火狐(Firefox)这3个浏览器即可兼容全部浏览器。
    具体区别如下:
    区别IE6与FF:
    background:orange;*background:blue;
    区别IE6与IE7:
    background:green !important;background:blue;
    区别IE7与FF:
    background:orange; *background:green;
    区别FF,IE7,IE6:
    background:orange;*background:green !important;*background:blue;
    注:IE都能识别*;标准浏览器(如FF)不能识别*;
    IE6能识别*,但不能识别 !important,
    IE7能识别*,也能识别!important;
    FF不能识别*,但能识别!important;
    另外再补充一个,下划线"_",
    IE6支持下划线,IE7和firefox均不支持下划线。
    于是大家还可以这样来区分IE6,IE7,firefox: background:orange;*background:green;_background:blue;
    注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
    以上是介绍区别各浏览器的CSS hack的写法,下面我们简单介绍这些CSS hack用法:
    要求说明:假如我们设置一个类名为exple的类CSS属性,CSS样式边框为1PX黑色边框,高度为100PX并要求,在IE6浏览器下宽度为100PX;IE7浏览器宽度下为150PX;火狐IE8谷歌浏览器下宽度为200PX;(PX是长度单位像素)
    则CSS代码如下:
    .exple{border:1px solid #000; height:100px;200px; *150px !important; *width100px;}
    这样只要在html设置一个div的类(class="exple"),这样这部分在火狐、IE8、谷歌浏览器下就会显示宽度为200px高度为100px带1px的黑边框的方块;IE7浏览器宽度下为150PX高度为100px带1px的黑边框的方块;在IE6浏览器下就会显示出长度和宽度为100px的带1px黑边的正方形。

  • 相关阅读:
    Spring AOP 代理创建方式
    VS全局搜索
    uni-app中添加AES加密
    中国菜刀"连接被重置"问题解决
    Windows go get下载包失败问题解决
    搭建vulhub 漏洞环境及安装Docker和docker-compose
    DedeCMS 5.7通用重装漏洞分析
    各就各位,预备,GO!
    ARL资产灯塔系统分组资产导出脚本
    玩《巫师3》需要了解的背景知识
  • 原文地址:https://www.cnblogs.com/geniusalien/p/3303674.html
Copyright © 2011-2022 走看看