2014年3月

【转】全面的css js hack

IE 选择器 Hack

/* IE 6 and below */
* html .selector  {} 
.suckyie6.selector {} /* .suckyie6 can be any unused class */

/* IE 7 and below */
.selector, {}

/* IE 7 */
*:first-child+html .selector {} 
.selector, x:-IE7 {} 
*+html .selector {}
/* Everything but IE 6 */
html > body .selector {}

/* Everything but IE 6/7 */
html > /**/ body .selector {}
head ~ /* */ body .selector {}

/* Everything but IE 6/7/8 */
:root *> .selector {} 
body:last-child .selector {} 
body:nth-of-type(1) .selector {} 
body:first-of-type .selector {}

IE 属性/值 Hack

/* IE 6 */
.selector { _color: blue; } 
.selector { -color: blue; }

/* IE 6/7 - acts as an !important */
.selector { color: blue !ie; } 
/* string after ! can be anything */

/* IE 6/7 - any combination of these characters: 
 ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */
.selector { !color: blue; } 
.selector { $color: blue; } 
.selector { &color: blue; } 
.selector { *color: blue; } 
/* ... */

/* IE 8/9 */
.selector { color: blue\0/; } 
/* must go at the END of all rules */

/* IE 9/10 */
.selector:nth-of-type(1n) { color: blue\9; }

/* IE 6/7/8/9/10 */
.selector { color: blue\9; } 
.selector { color/*\**/: blue\9; }

/* Everything but IE 6 */
.selector { color/**/: blue; }
IE Media Query Hack

/* IE 6/7 */
@media screen\9 {}

/* IE 8 */
@media \0screen {}

/* IE 9/10, Firefox 3.5+, Opera */
@media screen and (min-resolution: +72dpi) {}

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}

/* IE 6/7/8 */
@media \0screen\,screen\9 {}

/* IE 8/9/10 & Opera */
@media screen\0 {}

/* IE 9/10 */
@media screen and (min-width:0\0) {}

/* Everything but IE 6/7/8 */
@media screen and (min-width: 400px) {}
IE JavaScript Hack

/* IE 6 */
(checkIE = document.createElement("b")).innerHTML = ""; 
var isIE = checkIE.getElementsByTagName("i").length == 1;

/* IE 7 */
(checkIE = document.createElement("b")).innerHTML = ""; 
var isIE = checkIE.getElementsByTagName("i").length == 1;
navigator.appVersion.indexOf("MSIE 7.")!=-1

/* IE <= 8 */
var isIE = '\v'=='v';

/* IE 8 */
(checkIE = document.createElement("b")).innerHTML = ""; 
var isIE = checkIE.getElementsByTagName("i").length == 1;

/* IE 9 */
(checkIE = document.createElement("b")).innerHTML = ""; 
var isIE = checkIE.getElementsByTagName("i").length == 1;

/* IE 10 */
var isIE = eval("/*@cc_on!@*/false") && document.documentMode === 10;

/* IE 10 */
var isIE = document.body.style.msTouchAction != undefined;

Firefox 浏览器选择器 Hack

/* Firefox 1.5 */
body:empty .selector {}

/* Firefox 2+ */
.selector, x:-moz-any-link {}

/* Firefox 3+ */
.selector, x:-moz-any-link; x:default {}

/* Firefox 3.5+ */
body:not(:-moz-handler-blocked) .selector {}

媒体查询 Hack

/* Firefox 3.5+, IE 9/10, Opera */
@media screen and (min-resolution: +72dpi) {}

/* Firefox 3.6+ */
@media screen and (-moz-images-in-menus:0) {}

/* Firefox 4+ */
@media screen and (min--moz-device-pixel-ratio:0) {}

  JavaScript Hack

/* Firefox */
var isFF = !!navigator.userAgent.match(/firefox/i);

/* Firefox 2 - 13 */
var isFF = Boolean(window.globalStorage);

/* Firefox 2/3 */
var isFF = /a/[-1]=='a';

/* Firefox 3 */
var isFF = (function x(){})[-5]=='x';

Chrome 浏览器选择器 Hack

/* Chrome 24- and Safari 5- */
::made-up-pseudo-element, .selector {}
 
媒体查询 Hack

/* Chrome, Safari 3+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {}
 
JavaScript Hack

/* Chrome */
var isChrome = Boolean(window.chrome);

Safari 浏览器选择器 Hack

/* Safari 2/3 */
html[xmlns*=""] body:last-child .selector {} 
html[xmlns*=""]:root .selector  {}

/* Safari 2/3.1, Opera 9.25 */
*|html[xmlns*=""] .selector {}

/* Safari 5- and Chrome 24- */
::made-up-pseudo-element, .selector {}
``` 
###媒体查询 Hack

/* Safari 3+, Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {}
  

  JavaScript Hack

/* Safari */
var isSafari = /a/.proto=='//';
```  

Opera 浏览器选择器 Hack

/* Opera 9.25, Safari 2/3.1 */
*|html[xmlns*=""] .selector {}

/* Opera 9.27 and below, Safari 2 */
html:first-child .selector {}

/* Opera 9.5+ */
noindex:-o-prefocus, .selector {}
```  

###媒体查询 Hack

/* Opera 7 */
@media all and (min-width: 0px){}

/* Opera 12- */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {}

/* Opera, Firefox 3.5+, IE 9/10 */
@media screen and (min-resolution: +72dpi) {}

/* Opera, IE 8/9/10 */
@media screen {}

  

###JavaScript Hack

/* Opera 9.64- */
var isOpera = /^function (/.test([].sort);

/* Opera 12- */
var isOpera = Boolean(window.opera);
```


display:inline-block 失效问题

问题描述,当用户没有填写密码的时候讲鼠标移出就会把id为sppwdchange的元素给显示出来

www.luqidong.com

我把sppwdchange的元素给设置display:inline-block之后,发现不起作用,于是我直接在chrom的控制台里面敲命令直接执行

www.luqidong.com

发现还是不行,这让我很蛋疼,后来问了下其他前端发现他们也会遇到这个问题,这个问题的解决方法就是把inline-block写成inline-Block就可以解决了。

www.luqidong.com

真是郁闷。还有一个问题,就是当用户填写正确之后鼠标移出错误提示将会消失,但是在ie9下面却是这样的:

www.luqidong.com

最后完美的解决方法就是把后面的灰色字体元素设置在页面里面display:inline-block;就好了。ie真是让人蛋疼啊。

demo

在做一些产品交互效果的时候会有购买产品或者服务数量的交互,例如下图
www.78oa.com
第一次我布局的时候采用b标签来做增减按钮。但是后来发现这样做的话点击的太快会选择一部分内容如下图:
www.78oa.com
后来在网上找了一些方法发现都不怎么管用,所就去jd或者淘宝去看了下,发现他们是用a标签,然后href="javascript:viod(0)"。
最后我采用a标签来作为按钮,写好样式,加了一个href="javascript:viod(0)"。就不会出现点击选择旁边文字的效果了。
ps:在做增减的时候,如果用户填写了其他字符串再点增加会出现NAN的情况的解决方法:

                   if(isNaN(fish.one("#perNum").val())){//如果不是数字那么设置文本框里面值是1
                        fish.one("#perNum").val("0");
                    }
                    fish.one("#perNum").val(parseInt(fish.one("#perNum").val())+1);

更多请访问免费oa


78oa绑定域名通过外网访问

首先我们要在服务器上面安装好我们的78oa程序,这里由于78oa已经集成了阿帕奇和php和mysql数据库环境,而且php源码是加密过的所以暂时只支持在windows主机上运行,我这里用的是阿里云的主机,最低配置,但是用起来依旧很顺畅。如下图,我们先安装好:
www.luqidong.com
然后找到里面的阿帕奇配置文件,由于我是默认安装的,所以我的在C盘:地址是C:\Program Files\StarSoft\78OA\server\conf

阅读详细 »


ie6下jsonp返回失效问题

问题描述:

在ie6下用jsop,用fillder查看的确是已经发送成功并且已经有返回了,状态是成功的。但是成功函数就是不执行。

阅读详细 »


ie6下 event.preventDefault()失效报错问题

preventDefault()方法

该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。

阅读详细 »


ie6下图片空隙问题解决方法

IE6下图片下边有空隙的解决方法网上已经有很多种解决办法了,我今天同大家一起复习一下那些办法,并提供一些新的方法供大家参考。

阅读详细 »


未命名文档

先创建了一个Animal类,然后里面有breath方法,在创建一个Cat的类继承了Animal,最后实例化一个tommy的毛,里面也有breath方法。

阅读详细 »