针对不同浏览器,CSS如何写
我们在开发DIV+CSS页面时候常常会遇到开发出的网页的一些地方在各大浏览器比如微软IE6、微软IE7、微软IE8、火狐浏览器、谷歌浏览器有一些不同,如宽度、高度等地方有相差误。
IE6比较老的版本浏览器,用户比较多,
IE7较新浏览器,更接近标准浏览器,
IE8算是微软标准浏览器,但差别于浏览器,
火狐(Mozilla, Firefox)和谷歌浏览器(chrome)是比较标准的IE浏览器,一般我们以这个浏览器为开发参考平台,同时IE8与这两个浏览器解释CSS比较接近,一般只要通过火狐、谷歌浏览器测试兼容,一般就能确定IE8.
因此一般我们区别这些浏览器CSS hack的方法就变得简单,我们只需考虑IE6\IE7\火狐(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;width:200px; *width:150px !important; *width100px;}
这样只要在html设置一个div的类(class="exple"),这样这部分在火狐、IE8、谷歌浏览器下就会显示宽度为200px高度为100px带1px的黑边框的方块;IE7浏览器宽度下为150PX高度为100px带1px的黑边框的方块;在IE6浏览器下就会显示出长度和宽度为100px的带1px黑边的正方形。
针对不同浏览器,CSS如何写的更多相关文章
- 针对各种浏览器css不兼容的写法
/*针对谷歌浏览器内核支持的CSS样式*/@media screen and (-webkit-min-device-pixel-ratio:0) { 样式 } /*针对IE6特制识别的CSS样式*/ ...
- 怎么写针对IE9的CSS
(自己亲自试过有用)针对IE9的CSS只需在相应CSS代码加入只有IE9识别的 \9\0.具体代码如下: .div{ background-color:#0f0\9\0;/* ie9 */ } 其他浏 ...
- 针对特定浏览器起作用的CSS: IE Chrome Firefox CSS Hack
Firefox的CSSHack 只在Firefox上应用的CSS Hack,虽然这种情况非常少,但有时也会碰到: @-moz-document url-prefix() { .cssSelector ...
- 关于只针对ie7浏览器的css问题
如代码: .centerDiv .search_k2{ margin-left: 18px; *margin-left: 9px; margin-top: 10px; height: 40px;} 中 ...
- 区分IE8/IE7/IE6及其他浏览器-CSS “\9″
区分IE8/IE7/IE6及其他浏览器-CSS “\9″ 原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] by zhangxinxu from h ...
- 浏览器CSS兼容
一.<important 在IE6及FF中的使用>.box1 {width:150px !important;} .box1 {width:250px;} !important是说这个设置 ...
- 转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks
[总结]浏览器CSS Hacks汇总 浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...
- 12小时包你学会基于ReactMix框架的ReactNativeApp开发(二)基于Css+HTML写第一个app页面
上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么 ...
- 各大浏览器CSS Hack收集
各大浏览器CSS Hack收集 >>>>>>>>>>>>>>>>>>>>> ...
随机推荐
- Linux进程间通信
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我们在Linux信号基础中已经说明,信号可以看作一种粗糙的进程间通信(IPC, i ...
- JS --- 原型模式
创建一个对象,先来看一段代码: // 例如创建一个 Person 的构造函数, 让人有名字, 可以说话 function Person ( name ) { this.name = name; // ...
- Linux下不同服务器间数据传输--转载
因为工作原因,需要经常在不同的服务器见进行文件传输,特别是大文件的传输,因此对linux下不同服务器间数据传输命令和工具进行了研究和总结.主要是rcp,scp,rsync,ftp,sftp,lftp, ...
- Ember.js入门教程、博文汇总
第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...
- thinkphp的学习笔记
# Thinkphp ## 什么是框架?(框架开发)> 框架就是通过提供一个开发Web程序的基本框架(比如提供了分页类.数据库操作类.文件操作类等),使用框架可以减少开发者代码的编写.> ...
- c#_1:后台post请求
1:aspx内容 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Push.as ...
- 为什么不要使用Response.Close()
不要使用Response.Close() 不要使用Response.Close() 不要使用Response.Close() 1 因为:Close()方法会调用HttpWo ...
- java selenium验证元素是否存在
public boolean ElementExist(WebDriver driver,By locator) { try { driver.findEle ...
- PHP之OOP要点摘要
类和对象: 类是生成对象的模板,对象是活动组件; 面向对象编程实际操作都是通过类的实例(而不是类本身)完成的: 访问控制(public.protected.private):(1) ...
- C语言实现四则运算
学生:宋丹丹 张潇裕 #include<iostream>#include<ctime>using namespace std;void main(){ int x1,x2,a ...