2014-08-26

坑整理第二辑

最近估计有比较多的面试，所以赶紧整理了下第二个阶段里遇到的问题，比较有意思的是一个css的解析问题

##1. 关于line-height##
之前在做一个专题的时候遇到了一个很奇怪的现象，大致就是类似如下的代码

<span style="font-size: 29px;line-height: 32px;">A</span>
<span style="font-size: 12px">B</span>

如果给第二个span加一个line-height为29的话会使这个块下面的元素要向下一点；这样表达起来貌似有点生硬；
直接说原因吧，也是突然中意会到的，看css权威指南的时候，看到了行框生成的原理；里面有一点就是每一行的行内元素在默认情况是将自己的基线和整行元素的基线对齐；上面的两个元素他们没有设置vertical-align属性，所以都是基线在一条线上，他们的字体大小又不同，这个时候设置了行高都为32px，会使得两个元素形成行内框的底线不在一条线上，很明显字体小的元素的行内框的底线要更低，而整个行框的形成是取该行中所有元素的最低和最高进行决定的，这也导致了设置了第二个的line-height后，底线不是想象中第一个的底线，而是更低，所以也造成了最后的下榻的原因（其实线上有个例子的－－但是不好意思放出来）

更多有关于视觉格式化的请看上一篇博文

##2. CSS解析的顺序##
css选择器的效率。！！ div.nav > ul li a[title]
上面的实例来说，浏览器首先会尝试在你的HTML标签中寻找“a[title]”元素，接着在匹配“li和ul”，最后在去匹配“div.nav”。这就是前成所主的“选择器从右到左的原则”。

##3. new Date()##
这个算是一个严重的问题了，以前从来没注意过这个问题，那天他们提到了我才去看了下，当你在new Date(“2013-12-12”)这样的时候，后面的小时分秒没给定的时候存在一个比较大的危机，他会根据你所在的时区自动添加那个跟零时区相差的时候，所以我这样new的时候，实际上是生成了一个2013-12-12 08:00这样一个时间，不信你可以试试，所以问题就来了，当你对一个东西需要精确到小时的时候这样就要出乱子了，那天后台的人员告诉我，因为我的这个bug导致了部门亏损了68块钱。。。真是好忧伤。
解决方法

1.当然是new的时候默默注意，把后面的带上就算没有，字符串给拼接一个好了
2.getTimezoneOffset()这个方法会返回本地时间与格林威治标准时间 (GMT) 的分钟差。

##3. 关于element.style.**##
通过这种方式获取的css都是那些内联在元素里的样式，而那些通过css顶部声明的则不会通过这个方法来过去到，貌似刚搜索了下，关于获取元素css样式的问题，要是好好研究的话可以单独写一个文章整理，附上刚随手搜到的文章

##4. IE7下的绝对定位的问题##
IE7下面要对绝对定位的元素定位时要指明两个方向，不能只制定一个方向，如果在设置了overflow的时候。会出现下面的元素不是从上往下排还是掉到右侧的情况（就是现在布局没有跳出文档流，会被之前排好的元素的位置影响）
解决的方法就是好习惯，指明两个方向

##5. 关于box-shadw##
对于boxshadw这类属性如果父元素设置了overflow:hidden的属性，而子元素刚好又在边界上面，会出现这样阴影的效果属于父元素之外。然后就会被隐藏掉！！！

##6. 比较大小的问题##
一般的情况获取的数据也好信息也好，很多都会是字符串的信息，然后这就会带来一个问题，一些数字的比较，虽然说js里面是会进行一些隐性的强制转化的形式，但是遇到这种问题9 compare 19，按照正常的话当然是19大，但是按照字符串的比较的话，还是９大，因为第一个字符大
解决方式

1.进行比较的时候，用Number进行强制转换
2. 用parseint转化

注：两者还是有一些区别的，具体可以看点击这里

##7. 关于页面中的事件##
如果用了一些模块化的方法来进行管理，（比如nej），当你模块进行切换的时候，他之前对一个dom节点绑定的事件是不会回收的，然后当你再去调用这个模块的时候，他又会对这个节点绑定一次事件，然后就会发现，比如你点击一个按钮，他会触发多次一模一样的事件，所以要做好对事件的回收的处理

特别是如果要向服务器发一些请求的时候，这样会造成发很多次的请求，对性能会有影响（已掉两次坑）

##8. 关于data-id这样的属性##
一直以来在使用的时候，都是以node.dataset.id的形式来取值，但是在一次的测试中，发现这个属性还有兼容性问题，具体的兼容性可以看
msdn以及can I use __的介绍

在一般的情况下可以使用node.dataset.id或者是node.getAttribute(‘data-id’)，进测试在IE8下还可以这么取ndoe[“data-id”]，但是IE9就不行了

##9. 关于ie6、ie7折行问题(li用了float)##
之前做的一个有关于支付页面里的东西，里面是很多银行支付方式的列举，前几天被报了bug，一开始还以为是IE在float的情况在的元素的计算方式有点偏差然后导致的元素折行的情况出现，后来检查了貌似不是这个元素，然后网上找了下资料。

大致的情况是这样的：好多几个元素用li包裹，然后左浮动，按照正常的布局他会一直从左开始排版，要是不够了就会从下一行继续排版，然后一个在第一行最末尾的元素竟然自己出现的折叠，我也很不知其原因

解决方法：
1）如果文本中没有空格，用word-break属性的keep-all参数可解决这个问题，
2）如果文本中有空格，用white-space属性的nowrap 参数可解决问题。
具体可以参考这个博文

##10. 关于window.open##
经过测试，貌似这个函数是异步执行的

console.log("before open");
window.open(url,"_self");
console.log("a111")；

可以通过断点的方式调试，可以看到在浏览器的链接打开之前会先运行后面的语句，初步的推断，window.open是向那个链接发起了一个请求，然后待请求完毕之后再进行处理，所以有时候在一些函数判断的时候，要注意这点，可以直接加个return;来跳出函数，而且有个更加重要的问题就是如下

window.open(url,"_self");
window.open(url2,"_self");
console.log("a111")；

如果是立即执行的话那么第二个的url2应该就会不打开了，但是实际上的结果是浏览器跑的是第二个语句，由于它的“异步”(有待证明),第二个直接覆盖了前面的执行结果，所以这里也要小心

##11. 关于在IE8以及一下出现图片链接不能点击的问题##
问题是这样的，要实现一个卡片一样的块，点击跳转到一个新的页面，当然很自然的试用了如下的代码,图片加一个hover上去方法的效果，所以会在图片外层加一个div限制显示的大小，overflow:hidden这样的属性

<a>
    <div class="j-img><img src=""></div>
    <div class="j-title">#####</div>
</a>

现在的一个问题就是这样的写法在IE8以及一下的浏览器中，点击图片不会跳转，但是如果图片跟卡片之间有空隙，点击空隙还是可以跳转，这就造成了一种假象，图片是置于a卡片的上方，类似设置了一个z-index一样的属性

解决的办法：
暂时还没找到完美的解决办法，只能做的就是将img直接放在a的下面，如果读者有更好的办法，欢迎告之

附上几个相关的参考，貌似这个bug是一个比较偏僻的问题

update 20141008
后来测试了一个方法，貌似有效，其实以上的问题归根结底的关键问题就是在IE7上面不能点击的问题，我也测试了几次，感觉应该就是imag元素父元素中有width和height的属性或者是overflow:hidden都会对这个有影响，在去掉之后确实可行，还有一个办法就是用下hack *display:inline；使他变为行内元素，在sf社区上也发了一个帖子问了下，貌似确实是a元素行内元素内部不能含有块级元素

再附上一个参考链接：
Why can’t I click on this link with a nested image in IE7?

##12. input 输入框在chrome和ff下的样式不一样的问题 ##

之前没发现，那天测试的姐姐给报了一个bug，附上效果地址
不同的input
很明显，在border的上面差距很大，chrome比较平滑简单，而ff则比较在意显示的效果

##13. 关于position:absolute的一些定位##

关于position:absolute，正常的情况下，他是会按照从该节点开始一次往上找元素，找到第一个position属性不为static的元素进行定位，一般的情况都是这样就能处理了。不过有例外的就是如果找不到这样的元素是怎么定位呢？网上很多的流传是按照body进行定位，其实上是么？点击知乎的问题

其实这样的说法是不正确是，正确是应该是以viewport(也就是浏览器视窗内渲染 HTML 的空间)为大小的矩形。
代码如下

.block1{background-color: red;width: 400px;height: 300px;}
.block2{position:absolute;bottom:0px;left:0px;width:200px;height:100px;background-color:blue;}
<div class="block1"></div>
<div class="block2"></div>

可以查看下一个比较直接的截图
当浏览器的窗口比较大的时候

当浏览器的窗口比较小的时候

所有为了避免上面的block1和block2会发生图2重叠的情况，可以设置一个margin-bottom的间距==block2的高度

##14. new date的兼容##
又是new date，上回是时区的时间差，这回是兼容问题，貌似类似new Date(“2013-12-22 12:12”)这样的初始化在IE10上貌似就会挂掉了。所以稳妥点的初始化的方法就是new Date(2013,11,22,12,21)其中，月份是从0开始计算的

其他

在用一些模板的时候，比如ftl，永远不要相信后台能保证之前提供的接口，会把所有的数据都照常返回，出现意外的情况还是很多的，所以必须要做好容错的处理，对一些关键变量要进行判断，是否存在的判断是必须的
可以对前台获取到的数据进行一些处理，比如字符串”adsad ad”可以处理为”adsad ad”，即可以将一些没有必要的空格过滤掉
注意&&看清一些数字是字符串还是Number类型的，原因就是对于0和”0”，他表现出来的是两种情况
```
if(!!a)
a="0" true
a=0  false
```
z-index 仅能在定位元素上奏效（position 属性值为 relative 或 absolute 或 fixed的对象）。
注意下类似一些频繁发生的事件可以适当控制好他执行的评论，比如类似resize这类事件，稍微一动就会触发，所以可以采用如下的办法
```
var resizeEvent = null;
if (resizeEvent) {
    clearTimeout(resizeEvent)
}
resizeEvent = setTimeout(function(){
   /*event*/
}, 400);
```
css中的opciita有继承性父元素设置了透明，后面的子元素也会这样透明
opacity属性只能应用在那些背景色上，但是类似边框颜色等的没有效果，这个可以在css3中解决方案
对于浏览器的检测，用userAgent，只能说一般会对，现在有越来越多的东西会修改这个参数了，比如浏览器chrome可以模拟好多设备的代理，所以不能全信这个