有极速快乐十分吗|极速快乐十分走势图|

常见的浏览器Hack技巧总结

总结是为了更好地记忆
服务器君一共花费了202.453 ms进行了6?#38382;?#25454;库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

如果你经常需要做前端页面,那么你一定多多少少需要解决页面的浏览器兼容问题。而浏览器兼容问题大部分也集中在对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(?#23548;是?#20917;可能ie9还是有问题,再用这种方式)

这样就基本上就可以兼容所有IE。

其中粉红色部分为属性hack,黄色部分为选择器hack,它们可以结合使用。此外Firefox和Chrome也有它们专有的hack,详细hack方式及使用示例如下:

Firefox 与 Chrome 的 Hack

Firefox:

@-moz-document url-prefix()    /*写在选择器外层时(只可写在此处):Firefox only*/

Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0)    /*写在选择器外层时(只可写在此处):Chrome only*/

使用示例:

@-moz-document url-prefix()    /*Firefox*/
{
	body
	{
		background-color:pink;
	}
}

浏览器对css的解析是从前到后的,并?#20063;?#29992;最后一个样式声明。

CSS 实例

.color{
    background-color: #CC00FF;        /*所有浏览器都会显示为紫色*/
    background-color: #FF0000\9;    /*IE6、IE7、IE8会显示红色*/
    *background-color: #0066FF;        /*IE6、IE7会变为蓝色*/            
    _background-color: #009933;        /*IE6会变为绿色*/
}
background: red;       /* 对FF Opera和Safari有效 */
#background: blue;      /* 对 IE6 和 IE7有效 */
_background: green;      /* 只对IE6有效 */
/*/background: orange;*/      /** 只对IE8有效 **/
!important         /*FF、IE7有效*/
*         /*IE都有效*/

IE8是可以和IE7兼容的,简单一行代码,让IE8自动调用IE7的渲染模式。只需要在页面中加入如下HTTP meta-tag:<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />,只要IE8读到这个标签,它就会自动启动IE7兼容模式,保证页面完整展示。

混用起来大约是这样:

:root .demo {  
	background:#963\9; /* 仅IE9适用 */  
}  
.demo {  
	width: 300px;  
	height: 200px;  
	background: #036; /* 所有浏览器?#38469;?#29992; */  
	background: #09F\9; /* IE6~IE9 */  
	background: #09F\0; /* IE8~IE9 */  
	background: #09F\0/; /* IE8 */  
	*background: #F60; /* IE6/IE7 */  
	+background: #F60; /* IE6/IE7 */  
	@background: #F60; /* IE6/IE7 */  
	>background: #F60; /* IE6/IE7 */  
	_background: #ccc; /* IE6 */  
}  
@media all and (min-width:0) {  
	.demo {  
		background: #F06; /* webkit and opera */  
	}  
}  
  
@media screen and (-webkit-min-device-pixel-ratio:0){  
	.demo {background:#609;}/*webkit (& Opera9.2)*/  
}

本文地址:http://www.bavugt.tw/librarys/veda/detail/2182,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.bavugt.tw/librarys/veda/detail/2182

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效?#23454;停?#25105;觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而?#20063;?#31995;?#24120;?#22240;为在特定领域有一个足够量的知?#35835;?足够良好的知识结构,系统化以后就足以应对大?#35838;?#26366;遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知?#28010;?#35201;表达什么,我们可以让他坐“上位?#21271;?#31455;他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《Head First设计模式(中文版)》 弗里曼 (作者), 等 (作者)

《Head First设计模式》(中文版)共有14章,每章都介绍?#24605;?#20010;设计模式,完整地涵盖了四人组版本全部23个设计模式。前言先介绍这本书的用法;第1章到第11章陆续介绍的设计模式为Strategy、Observer、Decorator、Abstract Factory、Factory Method、Singleton,Command、Adapter、Facade、TemplateMethod、Iterator、Composite、State、Proxy。最后三章比较特别。第12章介绍如何将两个以上的设计模式结合起来成为新的设计模式(例如著名的MVC模式),作者称其为复合设计模式(这是作者?#28304;?#30340;名称,并非四人组的标准名词)。

更多计算机宝库...

有极速快乐十分吗
拼命赚钱放弃生活值得吗 体彩湖北11选5神彩通 冰球英文怎么说 捕鱼游戏机赢钱技巧 辽宁35选7规则 河南快3开奖结果 辽宁十一选五下载 有什么好玩的游戏可赚钱 上证指数行情 一波中特最准的网站