CSS IE6/7/8, Firefox, Safari, Chrome, Opera Hack使用简要归纳(转)

简介: 网上有很多关于IE6/7/8, Firefox, Safari, Chrome, Opera CSS Hack的文章,但我觉得太过繁杂,要不给出一张看也看不懂的CSS Hack归纳表,要不就是给出一大堆代码说明问题,不便于学习与使用。

网上有很多关于IE6/7/8, Firefox, Safari, Chrome, Opera CSS Hack的文章,但我觉得太过繁杂,要不给出一张看也看不懂的CSS Hack归纳表,要不就是给出一大堆代码说明问题,不便于学习与使用。我根据自己的使用情况来简单地归纳了一下IE6/7/8, Firefox, Safari, Chrome, Opera的CSS Hack使用方法,希望会对大家有用。

CSS Hack1:把IE6/7/8与其它浏览器区别开来

在css代码属性值后面加上“\9”(不包括双引号),如:

123#div {margin-top: 15px\9;}

*这样“margin-top: 15px”属性只有IE6/7/8浏览器能读出来。

CSS Hack2:针对IE6和IE7

在css代码的属性名称前加“*”(不包括双引号),如:

123#div {*margin-left: 15px;}

*这样“margin-left: 15px”属性只有IE6/7浏览器能读出来。

CSS Hack3:单独针对IE6

在css代码的属性名称前加“_”(不包括双引号),如:

123#div {_width: 15px;}

*这样“width: 15px”属性只有IE6浏览器能读出来。

CSS Hack4:单独针对IE7

在css代码的属性值后面加“ !important”(不包括双引号),如:

123#div {height: 18px !important;}

*这样“height: 18px”属性只有IE7浏览器能读出来。

CSS Hack5:单独针对IE8

在css代码的属性值后面加“\0”(是斜杠加零,不包括双引号),如:

123#div {background: green\0;}

*这样“background: green”属性只有IE8浏览器能读出来。

CSS Hack6:单独针对Firefox

把针对Firefox的CSS代码写在下面CSS函数的大括号之间
@-moz-document url-prefix(){ /*CSS代码*/  },如:

123@-moz-document url-prefix(){#main {background: red; }}

*这样id号为“main”的Html元素只有在Firefox中才会显示出“background: red”的效果。

CSS Hack7:单独针对Opera

把针对Opera的CSS代码写在下面CSS函数的大括号之间
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){/*CSS代码*/ },如:

123@media alland (-webkit-min-device-pixel-ratio:10000), not alland (-webkit-min-device-pixel-ratio:0){#content {background: url(http://guandian.co/logo.jpg) no-repeatcentertop;} }

*这样id号为“content”的Html元素只有在Opera中才会显示出“background: url(http://guandian.co/logo.jpg) no-repeat center top”的效果。

CSS Hack8:针对Safari和Google Chrome

把针对Safari和Google Chrome的CSS代码写在下面CSS函数的大括号之间
@media screen and (-webkit-min-device-pixel-ratio:0){/*CSS代码*/ },如:

123@media screenand (-webkit-min-device-pixel-ratio:0){#picture {background: url(http://guandian.co/mypic.gif) no-repeatcentertop;}}

*这样id号为“picture”的Html元素只有在Safari和Google Chrome中才会显示出“background: url(http://guandian.co/mypic.gif) no-repeat center top”的效果。但是如果Safari和Google Chrome内核版本不一样的话,CSS显示效果也会有所偏差。

以上是我自己归纳出来的CSS Hack,但是由于本人技术水平有限,还有很多不完整或是不尽合理的地方,请大家提出来,谢谢。

相关文章
|
2月前
|
Web App开发 前端开发
CSS Hack是什么?ie6,7,8的hack分别是什么
CSS Hack是什么?ie6,7,8的hack分别是什么
58 0
|
5月前
|
前端开发 JavaScript UED
css中什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
css中什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
22 0
|
6月前
|
前端开发 开发者
介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?
介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?
|
8月前
|
Web App开发 JavaScript
JS 获取当前浏览器类型(IE、Chrome、Edge、Firefox、Opera、UC、QQ)
JS 获取当前浏览器类型(IE、Chrome、Edge、Firefox、Opera、UC、QQ)
858 0
|
9月前
|
Web App开发 UED C++
在chrome浏览器中调用IE浏览器并访问(openIE.reg自定义协议)
在chrome浏览器中调用IE浏览器并访问(openIE.reg自定义协议)
|
10月前
|
Web App开发 前端开发
区分IE6,IE7,IE8,IE9,FireFox,Chrome浏览器的CSS hack
区分IE6,IE7,IE8,IE9,FireFox,Chrome浏览器的CSS hack
|
6月前
|
Web App开发 前端开发 JavaScript
|
1月前
|
存储 机器人
在阿里云RPA中,你可以通过以下步骤来更改默认唤醒IE浏览器的地址
【2月更文挑战第28天】在阿里云RPA中,你可以通过以下步骤来更改默认唤醒IE浏览器的地址
20 1
|
7月前
|
Web App开发 XML 编解码
IE浏览器下载文件中文文件名乱码问题解决
IE浏览器下载文件中文文件名乱码问题解决
85 0
|
4月前
|
Web App开发 JavaScript 前端开发
JavaScript在IE和标准浏览器下的兼容性处理
JavaScript在IE和标准浏览器下的兼容性处理
41 0

热门文章

最新文章