x404nan / one Goto Github PK
View Code? Open in Web Editor NEW记事本
记事本
just do it!
you can do more!!
yes , go on!
IE7的内联元素 可以受父容器的行高控制,而IE的块级元素不能受控制。(鄙人暂且只用了IE7)
比如 :
<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下面IE8以上有问题。设置为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设为常规默认大小。(再探)
flex 在ios8一下兼容性问题
父级flex 需设置 display: -webkit-inline-box;
今天遇到一个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');
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();
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地址,导致从不用域名过来的地址页面,跳到当前白名单页面不执行。
fixed:
if( !document.referrer || ( document.referrer && document.referrer.indexOf('jd') < 0 )){
window.location.reload();
return;
}
呃,
使用label套嵌input:
正常情况下 点击label是会触发input事件的。没问题。ok.!
当我们使用label模拟input样式时,可能会把input隐藏掉。那么问题来了。。
当input被display:none时,在ie8,ie7下 无论你用多大力气点击它都不会反应,除非你把电脑砸了。。。
so.. 浏览器机制不一样,有可能none以后这个元素就不在dom里,或者不受dom机制的影响了。
呃 。那么我们可以直接使用其他隐藏啊。。。 比如:
定位 啊, visibility:hidden啊, width&height 啊等等设置 在视觉上隐藏起来,只要不裸就好了。。
好了。ok。。
又是个bug啊。。
哎。。
在ie浏览器升级到10里面 他妈的默认输入框都会有 delete 按钮。 而且很牛逼, 目前是没有任何事件触发的。
IE10当然可以直接隐藏掉
input::-ms-clear{display:none;}
input::-ms-reveal{display:none;}
但是老版本没法。。
我擦,那我要监听input的change 咋办,用户点了叉叉却没反应,这绝对阳痿。。
那么问题来了。。如何操控这个叉叉呢。
办法一,使用一个标签默认空白去遮住这个叉,让用户既看不到又摸不到。不让你想入非非。。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.