x404nan/one

记事本

one's Issues

if you're not on your side, why should anyone else be.

just do it!
you can do more!!
yes , go on!

IE 行高

IE7的内联元素 可以受父容器的行高控制，而IE的块级元素不能受控制。（鄙人暂且只用了IE7）
比如 :

<style> .parent{ height:70px; line-height:70px; text-align:center; } .child{ *zoom:1; line-height:18px; vertical-align:middle; } </style>

<div class="parent">
<span class="child">this is test </span>
</div>
这样可以实现IE7不限高垂直居中。
而如果把span改成div或者变成其他块级元素时行高不会生效，即使给他加上dispaly:inline;zoom:1也是一样。

当然用zoom:1和display:inline会触发IE7以下、（IE8混杂版）的haslayout；

也就是说 IE7里的 内联元素 与 用样式修改成内联元素的块级元素 是有区别的。

首先说下空隙，根据上例，在inline元素后折行，换行都会产生空白符。会出现这样的情况：
1.inline元素的inline-block状态 后面会产生空隙；
2.block元素的inline-block状态 后面不会产生空隙；
3.inline元素的行高会受到空白符影响，导致不会居中；（这样只有把末尾的结束标签中间的空白去掉，才能正常使用）

通常情况下，对于多个连续的空白符（空格，换行符，回车符等），浏览器会将他们合并为一个空白符。CSS 中由 white-space 这个属性来控制（具体实现动手操作）。

在另一种情况下。
由列表li控制外层容器，内联元素作子容器时。
line-height又会失效，why?

据我发现IE8以上会受到list-style-type的影响，IE浏览器默认值是list-style-type: disc;
因为我们的样式表里会有重置list-style-type：none;这样line-height的行高失效了。
这个具体原因没去研究，只是发现这种方式的解决方法。
更：xhtml下面ＩＥ８以上有问题。设置为list-style-type: disc\9;可以解决。
html5下面没有这个BUG。

这样根据line-height的特性也可以实现垂直居中了。

利用line-height实现垂直居中两种方法：
1.使用display:table (parent) ; display:table-cell (child) ，IE7hack parent 为 block ，child 为 inline (首先child必须是个内联元素)，然后zoom触发haslayout;

2.使用li ：display:block (parent), inline: dispay : inline-block( child ) (首先child必须是个内联元素)；然后IE8以上 list-style-type:disc或者其他能触发 li 的默认状态的样式。

续：I7空白符问题，可以将父容器的font-size设置到 如：60px(高度为74px); 本身的font-size设为常规默认大小。（再探）

ios8 flex

flex 在ios8一下兼容性问题
父级flex 需设置 display: -webkit-inline-box;

IE 在a标签里使用label bug

今天遇到一个bug。

eg:

google
1

点击a标签，在chrome ，ff 都会表现正常，直接跳转链接。
但是在ie下出现bug,a标签的href不会被触发。

这是为什么呢？

首先看下label定义和用法
标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。

也就是说ie下面label会触发对应的控件，会导致a标签的href失效。
所以正常情况，我们应该不必要在a标签里面使用label.

转换时间戳

var timestamp = function(timers){
var timers = timers || "2016-08-3T06:00:00-04:00" ;
return Date.parse(new Date(timers));
}

ps : 06, 表示当日的18点 ，如果要当天的6点 可以写成2016-06-11T06;

//下午7点

timestamp('2016-08-03T07:00:00-04:00');

REM 设置规则

window.REM = function(params){

var params = params || {},
    designFontSize = params.designFontSize || '100', // 默认根字体大小，设置100为了便于计算. 而后元素样式的rem值都为 px值／designFontSize
    designWidth = params.designWidth || '750',
    doc = document.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
        //设置根字体大小 ＝ 当前屏幕分辨率宽度／（设计稿大小／默认设计字体大小）
        doc.style.fontSize = doc.clientWidth / ( designWidth/designFontSize ) + 'px';
    };

    //绑定浏览器缩放与加载时间
    window.addEventListener(resizeEvt, recalc, false);
    document.addEventListener('DOMContentLoaded', recalc, false);

}

REM();

移动端图片

移动端尽量使用放置图片 ，使用css，background做背景在
安卓，ios各个型号设备会有差异，
在有的安卓，如果遇到有input 输入框，恰好下面软件键盘被顶上，就会导致图片被缩放。
input输入框最好用弹窗或者新开页面，不要靠底部。

打卡

var zone = ['09','10','18','19','20']
var daka = (function(window){
window.dakaFlag = window.dakaFlag ;

var dakaFn = function(){
if( !dakaFlag ){
window.dakaFlag = 0;
}

if( dakaFlag > 70){
return;
}

$.each( zone , function(i , v){
if( $('#time-wrap .hour').text() === v ){
$('#clockIn').click();
console.log('打咯！')
}
});
window.dakaFlag++;
console.log(dakaFlag )
setTimeout(function(){
dakaFn();
},10006060)
}
dakaFn();
})(window);

微信 Referrer 问题

微信会检查网站Referrer地址，导致从不用域名过来的地址页面，跳到当前白名单页面不执行。
fixed:

if( !document.referrer || ( document.referrer && document.referrer.indexOf('jd') < 0 )){
window.location.reload();
return;
}

IE在label 标签里使用input

呃，
使用label套嵌input：

正常情况下 点击label是会触发input事件的。没问题。ok.！

当我们使用label模拟input样式时，可能会把input隐藏掉。那么问题来了。。

当input被display：none时，在ie8，ie7下 无论你用多大力气点击它都不会反应，除非你把电脑砸了。。。

so.. 浏览器机制不一样,有可能none以后这个元素就不在dom里，或者不受dom机制的影响了。

呃 。那么我们可以直接使用其他隐藏啊。。。 比如：
定位 啊， visibility：hidden啊， width&height 啊等等设置 在视觉上隐藏起来，只要不裸就好了。。

好了。ok。。

关于input 输入控件 右边叉叉的隐藏

又是个bug啊。。
哎。。

在ie浏览器升级到10里面 他妈的默认输入框都会有 delete 按钮。 而且很牛逼， 目前是没有任何事件触发的。
IE10当然可以直接隐藏掉
input::-ms-clear{display:none;}
input::-ms-reveal{display:none;}

但是老版本没法。。

我擦，那我要监听input的change 咋办，用户点了叉叉却没反应，这绝对阳痿。。

那么问题来了。。如何操控这个叉叉呢。

办法一，使用一个标签默认空白去遮住这个叉，让用户既看不到又摸不到。不让你想入非非。。