CSS Hack代码与浏览兼容总结

关于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代码

Edit in JSFiddle

CSS

.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,来自这里 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;}

时间: 2024-10-04 07:58:25

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

[转载]IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例 —— 浏览器

1.区别IE和非IE浏览器CSS HACK代码  #divcss5{background:blue; /*非IE 背景藍色*/background:red \9; /*IE6.IE7.IE8背景紅色*/} 2.区别IE6,IE7,IE8,FF CSS HACK [区别符号]:「\9」.「*」.「_」[示例]:  #divcss5{background:blue; /*Firefox 背景变蓝色*/background:red \9; /*IE8 背景变红色*/*background:black;

IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例

整理关于IE6.IE7.IE8.Firefox兼容性CSS HACK问题 1.区别IE和非IE浏览器CSS HACK代码 #divcss5{background:blue; /*非IE 背景藍色*/(音乐按摩椅)background:red \9; /*IE6.IE7.IE8背景紅色*/} 2.区别IE6,IE7,IE8,FF CSS HACK [区别符号]:「\9」.「*」.「_」[示例]: #divcss5{background:blue; /*Firefox 背景变蓝色*/backgrou

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

人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说 到浏览器兼容,CSS HACK自然而然地被我们想起.今天,我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事,需要我们有统一的规范来进行Coding,以 方便维护.而解决兼容的方法就是(必须是,因为这才最容易有问题的)其中一个最重要的.要解决的规范之一. 在解决兼容方法上,想定出一个统一的规范,个人认为应该以下面3点为基本原则: 权衡成本

CSS hack与各个浏览器兼容、JS等

FF !important IE \9 IE8 \0 IE7 + chrome @media screen and (-webkit-min-device-pixel-ratio:0){} firefox 下 style=“display:“” ”正常 style=“display:”“none” 不正常 FF 下不兼容 getElementsByName innerText 改用 getElementsByTagName innerHTML和value

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

css常见的快捷开发代码汇总(长期更新),包括CSS3代码,有一些css效果很顽固,经常会一时找不出解决方案,网络上也有很多的工具和高手提供了具体的浏览器兼容代码,这个页面我今后会经常整理,希望能够帮到重构和正在找这些效果的代码,如果你有更好的实现方案,不妨告诉我,或者你有解决不了的,也不妨告诉我.你想找浏览器兼容写法吗?点CSS浏览器兼容与hack代码(经验汇总,保持最新) Css背景颜色透明(#ddd) 请参考在线版制作 .liter{ filter:progid:DXImageTransf

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

一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CSS 代码的过程,就叫CSS Hack. CSS Hack常见的有三种形式:CSS属性Hack.CSS选择符Hack以及IE条件注释Hack, Hack主要针对IE浏览器. 1.属性级Hack:比如IE6能识别下划线"_"和星号" * ",IE7能识别星号" *

CSS Hack技术(一)

这世间坑爹的东西不少,浏览器可以算做一件,尤其的IE浏览器.关于浏览器的吐槽已经有不少了,我也就不在这添油加醋了.不过吐槽终究只是泄一时之愤,解决问题才是关键,今天我们就来讲一讲浏览器(样式)兼容的技术——CSS Hack. 浏览器不兼容有很多方面,有的是javascript脚本不兼容,也有的是样式(CSS)的不兼容,而CSS Hack解决的就是样式不兼容的问题.在样式(CSS)上,各大浏览器都有着许多异常的解析.而本文将会着重讲一下著名的『盒式模型』的浏览器兼容方法!在最后,将会给大家一个几乎

CSS Hack (各个浏览器兼容的问题)

写css样式的时候,恐怕最头疼的就是各个浏览器下的兼容性问题,即css hack,明明感觉应该是对的,但是就是出不来效果,我根据平时所接触的,总结一下关于兼容 性的技巧,希望可以对大家有所帮助…… CSS Hack的原理是什么 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. CSS Hack大致有3种表现形式,CSS类内部Hack.选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针

让IE和Firefox兼容的CSS技巧集合css hack

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不