常见的浏览器Hack技巧总结
来源:互联网 发布:发型设计软件破解版 编辑:程序博客网 时间:2024/05/01 06:08
如果你经常需要做前端页面,那么你一定多多少少需要解决页面的浏览器兼容问题。而浏览器兼容问题大部分也集中在对IE系列的兼容。这里就总结一下对IE系列的CSS Hack,记录一下,方便以后查阅。
IE Hack
IE系列浏览器的hack大略如下:
- _nowamagic:1px;-----------ie6
- *nowamagic:1px;-----------ie7
- nowamagic:1px\0;----------ie89
- nowamagic:1px\9\0;--------ie9
- :root nowamagic:1px; ----ie9(实际情况可能ie9还是有问题,再用这种方式)
这样就基本上就可以兼容所有IE。
其中粉红色部分为属性hack,黄色部分为选择器hack,它们可以结合使用。此外Firefox和Chrome也有它们专有的hack,详细hack方式及使用示例如下:
Firefox 与 Chrome 的 Hack
Firefox:
1
@-moz-document url-prefix()
/*写在选择器外层时(只可写在此处):Firefox only*/
Chrome:
1
@media
screen
and (-webkit-min-device-pixel-ratio:
0
)
/*写在选择器外层时(只可写在此处):Chrome only*/
使用示例:
1
@-moz-document url-prefix()
/*Firefox*/
2
{
3
body
4
{
5
background-color
:pink;
6
}
7
}
浏览器对css的解析是从前到后的,并且采用最后一个样式声明。
CSS 实例
1
.color{
2
background-color
:
#CC00FF
;
/*所有浏览器都会显示为紫色*/
3
background-color
:
#FF0000
\
9
;
/*IE6、IE7、IE8会显示红色*/
4
*
background-color
:
#0066FF
;
/*IE6、IE7会变为蓝色*/
5
_background-color
:
#009933
;
/*IE6会变为绿色*/
6
}
1
background
:
red
;
/* 对FF Opera和Safari有效 */
2
#bac
kground:
blue
;
/* 对 IE6 和 IE7有效 */
3
_background
:
green
;
/* 只对IE6有效 */
4
/*/background: orange;*/
/** 只对IE8有效 **/
5
!important
/*FF、IE7有效*/
6
*
/*IE都有效*/
IE8是可以和IE7兼容的,简单一行代码,让IE8自动调用IE7的渲染模式。只需要在页面中加入如下HTTP meta-tag:<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />,只要IE8读到这个标签,它就会自动启动IE7兼容模式,保证页面完整展示。
混用起来大约是这样:
01
:root .demo {
02
background
:
#963
\
9
;
/* 仅IE9适用 */
03
}
04
.demo {
05
width
:
300px
;
06
height
:
200px
;
07
background
:
#036
;
/* 所有浏览器都适用 */
08
background
:
#09F
\
9
;
/* IE6~IE9 */
09
background
:
#09F
\
0
;
/* IE8~IE9 */
10
background
:
#09F
\
0
/;
/* IE8 */
11
*
background
:
#F60
;
/* IE6/IE7 */
12
+
background
:
#F60
;
/* IE6/IE7 */
13
@
background
:
#F60
;
/* IE6/IE7 */
14
>
background
:
#F60
;
/* IE6/IE7 */
15
_background
:
#ccc
;
/* IE6 */
16
}
17
@media
all
and (
min-width
:
0
) {
18
.demo {
19
background
:
#F06
;
/* webkit and opera */
20
}
21
}
22
23
@media
screen
and (-webkit-min-device-pixel-ratio:
0
){
24
.demo {
background
:
#609
;}
/*webkit (& Opera9.2)*/
25
转载:http://www.nowamagic.net/librarys/veda/detail/2182
0 0
- 常见的浏览器Hack技巧总结
- 常见浏览器HACK技巧总结
- 各个浏览器hack的总结
- 不同浏览器的CSS Hack总结
- 兼容浏览器,hack的一些总结
- 浏览器hack总结 详细的浏览器兼容性的快速解决方法
- 浏览器hack总结 详细的浏览器兼容性解决方法
- hack :是解决页面浏览器不兼容的技巧方法
- 主流浏览器的hack
- 常见的CSS Hack
- CSS的hack技巧
- CSS hack原理与常见的hack
- 目前主流浏览器的hack
- 主流浏览器的CSS hack
- css hack 再次学习 IE浏览器常见的9个css Bug以及解决办法
- Css hack总结及其最佳用法,告诉你怎么运用hack,无懈可击的解决各个浏览器的样式兼容
- 巧用浏览器CSS属性值的不兼容向下兼容hack技巧
- 巧用浏览器CSS属性值的不兼容向下兼容hack技巧
- AIX环境Java进程cpu瓶颈分析
- Android4.2 系统设置修改,移除android setting的部分功能
- ArcGlobe三维开发之十八——纵断面图的绘制
- 黑马程序员_Java基础_函数,数组,常用排序
- Local declaration of '' " hides instance variable
- 常见的浏览器Hack技巧总结
- 页面左右滑动效果
- 谁是谁的寂寞,谁又是谁的忧伤
- opengl es glEnable 方法设置图形显示能力
- bcp能够实现按照条件导出表内数据
- seo优化-原创文章请留步 我有话要讲
- MySql安装与配置
- 浅谈企业网站优化战略
- ubuntu下搭建c/c++环境步骤讲解