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 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,但是由于本人技术水平有限,还有很多不完整或是不尽合理的地方,请大家提出来,谢谢。

时间: 2024-09-24 18:10:34

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

在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript_javascript技巧

Javascript Debug Toolkit 是一个开源免费的eclipse插件,官方主页:http://code.google.com/p/jsdt 下图给出一个调试工具支持的浏览器对照表 工具\浏览器 Ie Firefox Safari Chrome Opera 其他 VS.net 支持         Microsoft Script Debugger 支持           Firebug   支持         venkman   支持         NebBeans 支持

css IE6/7 padding-bottom Bug分析

e8/9(标准模式) and firefox/safari/chrome/opera ie6/7 and ie8/9(怪异模式) 外层div加了上下padding 15px,可是在ie6/7 and ie8/9(怪异模式)下padding却翻倍了. <!doctype html> <html> <head>  <meta charset="utf-8">  <title>ie6/7 double padding-bottom

css hack技巧详解 IE6-11、Chrome、FireFox、Safari、Opera

CSS Hack技术,就是利用不同浏览器不同版本之间的CSS实现的特性差异,来满足我们需要的效果:在所有主流浏览器上显示统一的效果,或者为特定浏览器显示特定的效果. 众所周知,如果在一个css样式选择器中存在两个名称相同的属性,浏览器一般会以最后面的属性为准. <style type="text/css"> .css-hack {     background-color: red;     background-color: blue; /* 最终背景色显示为蓝色 */

[转]JS根据useAgent来判断edge, ie, firefox, chrome, opera, safari 等浏览器的类型及版本

js根据浏览器的useAgent来判断浏览器的类型 userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值. JavaScript语法:navigator.userAgent PHP语法:$_SERVER['HTTP_USER_AGENT'] ASP语法:Request.ServerVariables("HTTP_USER_AGENT") ASP.NET语法:HttpContext.Current.Request.UserAgent JSP语法:r

CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera_经验交流

现在的浏览器IE6-IE10.Firefox.Chrome.Opera.Safari...数量众多,可谓百家争鸣,对用户来说有了很多的可选择型,不过这可就苦了Web前端开发人员了.今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐.Chrome.Opera浏览器的Hack,并把这些CSS Hack综合的一起,写了一个小的浏览器测试器.如图所示: 下面就来看一下代码吧: html部分: 复制代码 代码如下: <div class="content">

js获取鼠标位置(兼容 Firefox 3.6, Opera 10.10, Chrome 4.1)

js获取鼠标位置(兼容 Firefox 3.6, Opera 10.10, Chrome 4.1) <script language="网页特效"> function document.onmouseo教程ver() {   document.all("txtbox").value=event.screenX+"x"+event.screenY; } private void Button1_Click(object sender,

css html php-css fontface 在firefox和chrome里能显示正常,但是在IE里不正常

问题描述 css fontface 在firefox和chrome里能显示正常,但是在IE里不正常 我自己简化了一个字库,生成了TTF,EOT,WOFF,SVG格式的,在FIREFOX里面能正常的显示文字,但是在IE里,第一个中文字就会显示不正常,并且我用IE的开发者工具发现IE7还出现了很奇怪的问题,原来英文标题后面没有"我"字,但是在IE7下面就出现了,IE7以上都是正常的. 测试地址有两个 http://test.digv.co:81/webfont/test.html, htt

js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome

js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome 文本框: 复制代码 代码如下:<input type="text" onkeydown="keydownsearch(event)" /> js代码: 复制代码 代码如下: function keydownsearch(evt) { evt = (evt) ? evt : ((window.event) ? window.event : "")

JS控制图片翻转示例代码(兼容firefox,ie,chrome)_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>图片旋转效果<