CSS Hack代码与浏览兼容总结
2014-04-08 18:16
197 查看
关于CSS Hack的东西能少尽量少吧。发现这篇文章我写得太复杂了,所以重新精简了一下,把代码粘贴到jsfiddle上,方面修改代码和维护。
2.综合一下常用的CSS Hack代码
3.IE CSS Media
受影响的浏览器: 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;}
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代码与浏览兼容总结
- 兼容ie 火狐 谷歌等各大浏览器css hack代码总结
- IE6、IE7、Firefox兼容CSS Hack总结
- IE兼容问题,各类css hack代码(亲测有效)
- 兼容ffIE678 hack(IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例)
- Css hack总结及其最佳用法,告诉你怎么运用hack,无懈可击的解决各个浏览器的样式兼容
- Css hack总结及其最佳用法,告诉你怎么运用hack,无懈可击的解决各个浏览器的样式兼容
- 兼容浏览 firefox、chrome、ie 的flash(swf) 的代码!
- 【实习记】2014-09-04浏览代码查middle资料+总结我折腾过的源码浏览器
- CSS Hack汇总快查(CSS兼容代码演示)
- CSS Hack汇总快查(CSS兼容代码演示)
- CSS Hack汇总快查(CSS兼容代码演示)
- 【总结】IE6,IE7,IE8,Firefox兼容的css hack 补充!
- 网页浏览次数统计jsp代码及jsp总结
- 浏览请兼容问题总结
- CSS Hack代码范例:兼容IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.0
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
- CSS Hack汇总快查(CSS兼容代码演示)
- 兼容各浏览哭的js无缝滚动代码