关于CSS Hack的东西能少尽量少吧。发现这篇文章我写得太复杂了,所以重新精简了一下,把代码粘贴到jsfiddle上,方面修改代码和维护。

1, IE条件注释法,微软官方推荐的hack方式。

只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器上显示
<![endif]--> 只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器上显示
<![endif]--> 只在IE6以上版本生效
<!--[if gt IE 6]>
这段文字只在IE6以上版本IE浏览器上显示
<![endif]--> 只在IE7上不生效
<!--[if ! IE 7]>
这段文字在非IE7浏览器上显示
<![endif]--> 非IE浏览器生效
<!--[if !IE]><!-->
这段文字只在非IE浏览器上显示
<!--<![endif]-->

2.综合一下常用的CSS Hack代码

.csshack{
background:blue;
background:blue\9; /*all ie*/
background:blue\0/; /*ie8-ie9*/
background/*\**/: blue\9; /* ie7-ie8*/
*background:blue;/* or #background: blue */ /*ie6-ie7*/
+background:blue; /*ie7*/
_background:blue; /*ie6*/
}
:root .csshack{
background:blue; /*大于等于ie9*/
}
/* IE9, IE10 */
@media screen and (min-width:0\0) {
.csshack { color: red}
}
/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#veintiun { color: red; }
}
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
} /* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red } /* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red } /* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }

3.IE CSS Media

/* @media hacks */

/* IE6/7 only (via Keith Clarke) */
@media screen\9 { } /* IE6/7/8 (via Keith Clarke) */
@media \0screen\,screen\9 {} /* IE8 (via Keith Clarke) */
@media \0screen { } /* IE8/9/10 */
@media screen\0 { } /* IE9/10 */
@media screen and (min-width:0\0) {
body { background: yellow; }
}

4.button重置css样式兼容ie6,ie7

button在IE6、IE7下的兼容性,需要充值css为overflow:visible

5.让IE6支持max-width,min-width

.sector{max-width:500px; _width:expression((documentElement.clientWidth>500)?"500px":"auto");

min-width:300px; _width:expression((documentElement.clientWidth<300)?"300px":"auto");}

6.IE6下某些情况line-height无效

当在一个容器里文字和img、input、textarea、select、object等元素相连的时候,对这个容器设置的line-height数值会失效; 同时以上元素的行高可能×2。
受影响的浏览器: Microsoft Internet Explorer 5.01 / Windows Microsoft Internet Explorer 5.5 / Windows Microsoft Internet Explorer 6

解决办法:
对和文字相连接的img、input、textarea、select、object等元素加以属性:
{margin: (所属line-height-自身img,input,select,object高度)/2px 0;vertical-align:middle;}

CSS Hack代码与浏览兼容总结的更多相关文章

  1. IE兼容问题,各类css hack代码(亲测有效)

    现在大部分企业对浏览器兼容要求是IE7+或者IE8+,要求IE6的很少,此处一并写出. IE6: _margin-top: 20px; IE6+IE7: *margin-top: 20px; +mar ...

  2. 【荐】说说CSS Hack 和向后兼容

    人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说 到浏览器兼容,CSS HACK自然而然地被我们想起.今 ...

  3. 怎么用css hack处理各浏览器兼容IE6,IE7,IE8,IE9/ FF

    第一:什么事浏览器兼容性 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题.在网站的设计和制作中,做好浏览器兼容,才能够让网站 ...

  4. ie10 css hack 条件注释等兼容方式整理

    点评:ie10已经上线一段时间了,相信已经有一部分前端潮人体验过了,截至到现在,在ie6到ie9的浏览器各种各样的古怪行为,开发人员不得不使用条件注释,有条件的类,和其他特定于IE的css hack来 ...

  5. css常用代码大全以及css兼容(转载)

    css常见的快捷开发代码汇总(长期更新),包括CSS3代码,有一些css效果很顽固,经常会一时找不出解决方案,网络上也有很多的工具和高手提供了具体的浏览器兼容代码,这个页面我今后会经常整理,希望能够帮 ...

  6. css 浏览兼容问题及解决办法 (1)

    主流浏览器css兼容问题的总结 最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑. ...

  7. CSS Hack技术介绍及常用的Hack技巧集锦

    一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...

  8. Web前端技术研究:Css hack技术---令人沮丧的技术

    我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...

  9. CSS Hack技术介绍及常用的Hack技巧

    一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...

随机推荐

  1. struts2 s:textfield

    初学struts2,在头脑中一直在想一个问题,就是对于struts2 ,当应用其自身的标签时,例如: <s:form> <s:textfield name="a" ...

  2. UVA 12219 Common Subexpression Elimination

    题意: 求最小的表达式树,也就是把相同的表达式子树给替换成最前面相同的编号. 分析: 用map<string,int>smp;存放子树对应的字符串,如果以后出现相同的子树则用相同编号表示. ...

  3. PL/SQL块loop..各种循环练习

    --利用loop输出1到100的值并求和 ---loop exit end loop set serveroutput on; declare v_i ; v_sum ; begin loop )th ...

  4. sffs

    因为微软收购了Skype,就减少了对linux版软件的支持,官方下载页面已找不到了.只有这一个地址了.要下的尽早.http://download.skype.com/linux/skype-ubunt ...

  5. mysql 更新 语句中 的 safe_mode

    在mysql5中,可以设置safe mode,比如在一个更新语句中UPDATE table_name SET bDeleted=0;执行时会错误,报:You are using safe update ...

  6. nginx1.9.4 +php 5.5.29+yii2.0配置手册

    nginx1.9.4 +php 5.5.29+yii2.0配置手册 目录 一.    php5.5.29安装配置    2 二.    nginx1.9.4安装配置    2 三.    yii2.0 ...

  7. python--执行文件的绝对路径

    1.__file__属性对应文件名. 2.os.path.realpath(__file__)这样就可以得到文件的绝对路径.

  8. MFC中SQLite数据库的使用

    1打开数据库 BOOL playDlg::openData() { WCHAR a[100]; CString path; path = m_exePath+L"sentence_makin ...

  9. zookeeper 手动T掉已挂节点

    zjtest7-redis:/root/zk# cat test_zk.pl use ZooKeeper; use AnyEvent; use AE; use Data::Dumper; use IO ...

  10. qt运行库

    KERNEL32.DLL MINGWM10.DLL MSVCRT.DLL LIBGCC_S_DW2-1.DLL QTCORE4.DLL QTGUI4.DLL 笔者安装的是QT SDK.(发行版本这是前 ...