博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS Hacker
阅读量:5052 次
发布时间:2019-06-12

本文共 1850 字,大约阅读时间需要 6 分钟。

一、各种浏览器css hacker

      当前市面上的浏览器特别多,而对于前端设计来说,要满足所有的浏览器,兼容处理是非常的伤脑筋,特别的痛苦。
      下面是从网络上整理过来的hacker方法:

#yourId / yourClass{

/* normal */}
* html #yourId / yourClass{
/* IE6 and below */}
*+html #yourId / yourClass{
/* IE7 only */}
@media all and (min-width:0px) {

   
#yourId / yourClass{
/* opera */}
}

      用法:直接写css,用firefox作为第一浏览器看效果,然后IE6下不一样,就用* html重写那个ID容器或者类;如果IE 7不一样,就用*+html重写,如果opera下面不一样,就用@media那个,当然这些重写的需要放在原来的后面。呵呵,就这么简单。这个方法用了之后可能会上瘾,可是会有诸如增加css文件容量等不爽,甚至有时候还会出现直接用这个写几段不同的。所以还是建议能熟悉了解个浏览器具体是在什么属性上支持不一样(例如border宽度IE6认为是不能算在width里面的,但是firefox是认为算width一起的),先尽力写几个浏览器通用的css,不到必不得已不用这个hack方法。

      原理:firefox认为是css语法错误,所以忽略。但是不同IE版本识别不同,不忽略,所以能实现hack,并且*+html还能通过w3c验证,呵呵,爽吧。opera那个就不多说了,也是类似原理,但是看起来比较崩溃,要说明的是,firefox下没问题的话,opera基本也没什么问题的,所以不太会用到这个hack。
      需要注意的是:*+html 对IE7的HACK 必须保证HTML顶部有如下声明,”<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd“>”
      因此这种方法也不是十分的完美。
      另外就是 !important 这个方法了(firefox遇到这个优先级就最高,但是IE6不认,所以下面重新定义可以覆盖),不过这个貌似是以前甚至现在都很多人在用的,但是我个人感觉不是很爽,不能像上面的那样明确的搞定某个浏览器。比如现在IE7对规范css支持已经比IE6好了不知道多少,但是还是会有和firefox有的差异,所以用important的方式,控制起来并不像上面的那么一目了然。
      收集的最全hacker

#demo{


   
color:red;/*All*/
   
color:red\9;/*All IE*/
   
color:red\0;/*IE8 only*/
   
+color:blue;/*IE6, IE7 还能用 * 或者 # */
   _color
:green;/*IE 6*/
   
[;background-color:green;]/*safari, chrome*/
}

* html #demo{
/*IE 6 and below*/}

*+html #demo{
/*IE 7, IE 8 beta*/}

@media all and (min-width:0px){

   
#demo{
/*Opera*/}
}

/*\*//*/
#demo {
/*IE 8 beta*/}
/**/

@media screen and (-webkit-min-device-pixel-ratio:0) {

   
#demo{ /* 针对Chrome、Safari 3.0、Opera 9 的CSS样式 */ }
}

body
:nth-of-type(1)#demo{
/*Chrome &amp; Safari 3.1*/}

.className, x:-moz-any-link {
/*FireFox 2 */}

.className, x:-moz-any-link, x:default{
/*FireFox 3*/}

html
>/**/body .foo, x:-moz-any-link, x:default{
/* Only FireFox 3 */}

转载于:https://www.cnblogs.com/lfire/archive/2012/08/24/2653907.html

你可能感兴趣的文章
log4net介绍及使用
查看>>
CMS:文章管理之视图(3)
查看>>
清北学堂的小技巧和小收获
查看>>
模型压缩方向一个很牛的paper
查看>>
Android--AsyncTask异步加载详解
查看>>
YARN学习总结
查看>>
C#基础温习(2):温习控制台程序(二)
查看>>
一些文章
查看>>
注解@ResponseBody的作用
查看>>
java main函数不执行?
查看>>
iOS 更好用的打Log方式-显示文件名、行数
查看>>
从MS SQL删除大数据说开去
查看>>
NOVO SOP (SOP简介及历史)
查看>>
获取JNDI数据源
查看>>
java听课笔记(十)
查看>>
flash与字符串:替换表情
查看>>
Docker常用命令
查看>>
windows7+docker添加php扩展
查看>>
[UE4]多播代理实例
查看>>
开奖计算---五星直选复式
查看>>