小知识点总结

  

1.为什么不能创建1px的容器?

这个真没关注过,面试的一道题。回来一查,原因是ie6有默认的行高,网上说是用overflow:hidden|zoom:0.08|line-height:1px,经过测试发现就是overflow:hidden是好用的

2.为什么连接点击过后hover不起作用了?

这个是因为顺序错了,没有按照LoVe HAte顺序写

3.怎么样让input[type=file]兼容各浏览器?

之前专门写过一篇blog是讲他的实现问题的,突然问起来理论不知道该怎么解释。现在归纳一下:

 

因为各浏览器对它的渲染不同,所以采用一种统一的假象,就是让真的input[type=file]透明,也就是opacity=0,然后在他下面绝对定位一个input+img,他是跟真file的位置要重合的,这样因为真file的透明,看到的是假象的input+img,但是当点击的时候,操作的还是真file,这是实现他的主要代码:

 1 div.fileinputs {
 2     position: relative;
 3 }
 4 
 5 div.fakefile {
 6     position: absolute;
 7     top: 0px;
 8     left: 0px;
 9     z-index: 1;
10 }
11 
12 input.file {
13     position: relative;
14     text-align: right;
15     -moz-opacity:0 ;
16     filter:alpha(opacity: 0);
17     opacity: 0;
18     z-index: 2;
19 }
20 
21 <div class="fileinputs">
22     <input type="file" class="file" />
23     <div class="fakefile">
24         <input />
25         <img src="search.gif" />
26     </div>
27 </div>

参考文章:http://www.w3help.org/zh-cn/causes/HF3001

http://www.quirksmode.org/dom/inputfile.html

 

posted @ 2013-09-05 16:34  enggirl  阅读(144)  评论(0编辑  收藏