CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera

2024-10-31 09:16:22

现在的浏览器IE6-IE10、Firefox、Chrome、Opera、Safari。。。数量众多，可谓百家争鸣，对用户来说有了很多的可选择型，不过这可就苦了Web前端开发人员了。
今天把一些常用的CSS Hack整理了一下，包括常用的IE hack以及火狐、Chrome、Opera浏览器的Hack，并把这些CSS Hack综合的一起，写了一个小的浏览器测试器。如图所示：

下面就来看一下代码吧：

html部分：

代码如下:

<div class="content">
    <div class="test"></div>
    <div class="txt">
        <p>IE6下背景颜色：<span class="ie6" style="background-color: #ccc;">#ccc</span></p>
        <p>IE7下背景颜色：<span class="ie7" style="background-color: #666;">#666</span></p>
        <p>IE8下背景颜色：<span class="ie8" style="background-color: #06f;">#06f</span></p>
        <p>IE9下背景颜色：<span class="ie9" style="background-color: #f00;">#f00</span></p>
        <p>IE10下背景颜色：<span class="ie10" style="background-color: #0ff;">#0ff</span></p>
        <p>webkit,Safari,Chrome下背景颜色：<span class="webkit-safari-gg" style="background-color: #ff0;">#ff0</span></p>
        <p>FireFox下背景颜色：<span class="firefox" style="background-color: #f0f;">#f0f</span></p>
        <p>Opera下背景颜色：<span class="opera" style="background-color: #0f0;">#0f0</span></p>
    </div>
</div>

CSS部分，此部分就只贴Hack部分的代码吧，布局的就不贴了:

代码如下:

.content .test {
    width: 200px;
    height: 200px;
    background: #f60; /*all*/
    background: #06f9; /*IE*/
    *background: #666; /*IE6,7*/
    _background: #ccc; /*IE6*/
}

/* webkit and opera */
@media all and (min-width:0){
    .content .test {
        background: #0f0;
    }
}

/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .content .test {
        background: #ff0;
    }
}

/*FireFox*/
@-moz-document url-prefix() {
    .content .test {
        background: #f0f;
    }
}

/*IE9+*/
@media all and (min-width:0) {
    .content .test{
        background: #f009;
        }
}

/*IE10+*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .content .test {
        background: #0ff;
    }
}

css-hack-ms-moz-webkit-o-Jb51.net.rar

CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width:
特牛的FF/IE6/IE7专用CSS HACK

这是一篇关于CSS HACK的文章,这篇文章中提到的CSS HACK是针对class.id中属性的HACK,排列的顺序都具有要求.今天要和大家说的是针对class.id所做的CSS HACK. 复制代码代码如下: .test{/*FF*/ height:20px; background-color:orange; } *+html .test{/*IE7*/ height:20px; background-color:blue; } *html .test{/*IE6*/ height:20p
浏览器兼容解决FF/IE6/IE7背景专用CSS HACK

自从互联网开始的那一刻起,各浏览器间的争斗就没有停止过.当然其中最苦的就是网页制作人员了,为了达到用户体验以及可用性的标准,不得不在多个浏览器上为统一效果而奔波.真希望哪一天FF可以一统天下,虽然现在还是IE的大天下.特别是微软最新发布的IE7浏览器,其CSS的兼容性确实给一些网页制作人员又添加了一个沉重的新负担. 为了让各浏览器有同样的显示效果,我们不得不用到CSS HACK.当然在这篇文章中我们只谈现在使用率最高的IE6和FF,以及将来可能会成为主流的IE7的CSS HACK,至于IE6以下
CSS Hack 汇总速查手册浏览器兼容必会

屏蔽IE浏览器(也就是IE下不显示) 复制代码代码如下: *:lang(zh) select {font:12px !important;} /*FF 可见,特别声明:由于Opera最新的更新,此句目前已经成为FF的专用HACK*/ select:empty {font:12px !important;} /*safari可见*/ 这里select是选择符,根据情况更换.第二句是MAC上safari浏览器独有的. 仅IE7识别复制代码代码如下: *+html {-} 当面临需要只针对IE7
通过CSS Hack 区分 FF/IE7/IE6/IE5.5/IE5 代码推荐

通过CSS Hack 区分 FX/IE7/IE6/IE5.5/IE5 #example{color:red ;} * html #example{color:blue;} *+html #example{color:green;} 这是在 FireFox 或者 Opera 下面的效果这是在 IE 6 下面的效果这是在 IE 7 下面的效果以下为简单区分FF/IE6/IE7示例这行文字在FF下应为红色,在IE6下应为蓝色,在IE7下应为绿色. [Ctrl+A 全选注:如需引入外部Js需刷
CSS Hack收集汇总

屏蔽IE浏览器(也就是IE下不显示) *:lang(zh) select {font:12px !important;} /*FF的专用*/ select:empty {font:12px !important;} /*safari可见*/ 这里select是选择符,根据情况更换.第二句是MAC上safari浏览器独有的. 仅IE7识别 *+html {-} 当面临需要只针对IE7做样式的时候就可以采用这个HACK. IE6及IE6以下识别 * html {-} 这个地方要特别注意很多地主都写了
网页制作中十个最好的CSS hacks

If you are front end coder you must know how important is to make cross browses, valid CSS and xHTML code. And also you must know how much time we are spending in all those hacks and fixes for various browsers. I've written about some of them earlier
很不错的 CSS Hack 又学了一招

CSS Hack height:20px; /*For Firefox*/ *height:25px; /*For IE7 & IE6*/ _height:20px; /*For IE6*/ 今天学到了一手,效果不错,哇卡卡卡卡
CSS Hack 汇总快查

*:lang(zh) select {font:12px !important;} /*FF的专用*/ select:empty {font:12px !important;} /*safari可见*/ 这里select是选择符,根据情况更换.第二句是MAC上safari浏览器独有的. 仅IE7识别 *+html {-} 当面临需要只针对IE7做样式的时候就可以采用这个HACK. IE6及IE6以下识别 * html {-} 这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可
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">
一个针对IE7的CSS Hack

IE7 修复了很多 bug,也增加了对一些选择符的支持,所以现在诸如 *html {} 和 html>body {} 等针对 IE 隐藏或显示的 hack 都会在 IE7 中失效.虽然 CSS Hack 不推荐使用,条件注释才是万无一失的过滤器,但是条件注释只能出现在 HTML 中,CSS Hack 还是有用武之地的.Nanobot 发现了一些针对 IE7 的 CSS Hack,具体就是: >bodyhtml**+html 这三种写法,其中前两种都是不合法的 CSS 写法,在标准兼容浏览器中被
教你如何写出可维护的JS代码

什么是可维护代码可维护代码需要遵循以下几个特点. 1.可理解性-其他人可以接手代码并理解它的意图和一般途径. 2.直观性-代码中的东西一看就明白,不管其操作过程有多复杂. 3.可适应性-代码以一种数据变化不要求完全重写的方法撰写. 4.可扩展性-在代码架构上已考虑在未来允许对核心功能进行扩展. 5.可调试性-当有地方出错时,代码可以给你足够的信息快速直接找出问题的所在. 代码约定一种让代码变得可维护的简单途径是形成一套JavaScript代码的书写约定.由于JavaScript的可适应性,代
CSS hack用法案例详解

之前一直很狭隘的对CSS hack持有偏见,觉得写得规范的代码不应该使用这些"邪门歪道",可最近产品发布一个小问题却让我头疼了很久,最后查了一下资料,竟然使用CSS hack轻松解决了,不得不服啊,对付神奇的IE就得使用这些利器. 什么是CSS hack 由于不同的浏览器,甚至同一浏览器的不同版本对CSS的解析认识不一样,导致生成的页面效果不一致,写出针对不同浏览器CSS code就称为CSS hack. 常用的CSS hack 有三种方式,CSS 内部hack.选择器hack.HTM
IE条件语句 IE hack大全

Conditional comments work as follows: 复制代码代码如下:  [code] Their basic structure is the same as an HTML comment (). Therefore all other browsers will see them as normal co
JS+CSS实现实用的单击输入框弹出选择框的方法

本文实例讲述了JS+CSS实现实用的单击输入框弹出选择框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!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
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法.分享给大家供大家参考.具体分析如下: 这里用CSS+JS实现点击文字后动画展开一个DIV层菜单,到期会自动关闭,是CSS结合JS实现的效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera

相关推荐

随机推荐