今天接了个新项目,年底要做完。预祝我顺利完成工作吧。在搭css框架的过程中,遇到了一些浏览器兼容性问题。于是就统计一下各个浏览器专用的css hack吧。
(粘贴自百科百科)
针对火狐浏览器的CSS Hack:
@-moz-document url-prefix() { .selector { attribute: value; }}
针对webkit内核及Opera浏览器的CSS Hack:
立即学习“前端免费学习笔记(深入)”;
@media all and (min-width:0){ .selector { attribute: value;/*for webkit and opera*/ }}
从这个样式我们只能把webkit内核的浏览器和Opera浏览器从其它浏览器中区分出来,但并不能区分它们俩,因此我们还需要在上面样式的基础上再加一个样式:
@media screen and (-webkit-min-device-pixel-ratio:0) { .selector { attribute: valueForWebKit;/*only for webkit*/ }}
由于这个样式是针对webkit的,会把前面的样式覆盖掉,因此,通过这两个样式就能区分出webkit和opera了,opera的属性值取value,webkit的属性值取valueForWebKit。
其实按常规来说,我们一般是处理ie上的兼容问题,但遇到需要处理火狐或Chrome的兼容问题时,一定要先查看网页结构是否合理以及便签使用是否规范,直到迫不得已时再使用上面的CSS Hack。
HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号