哎，最近工作太忙，都好久没来写点东西了。
这也是最近工作中碰到的一个问题，其实以前也经常碰到过。具体是这样的，有一个图片链接，为了有明显一些的提示效果，需要在鼠标移上去的时候把它放大。按思路来说，其实是很容易的，只要在a:hover img{}里定义鼠标经过时改变图片的大小就可以了。但实际上，在IE6中，a:hover img{}里定义的内容并不生效。
IE6对伪类的支持真的很烂，除了A标签外其它标签都不支持:hover伪类，而偏偏这个唯一支持的a:hover也还有着BUG。解决的方法就是给a:hover {}定义一个属性：
a:hover {zoom:1;}/*这里可以换成其他很多的属性。*/
a:hover img {……}在网上找出的答案基本上都是这样，的确这样能解决问题，但却都没有说这个BUG到底是为什么。最初我是以为是要触发layout，但经过试验，不能触发layout的属性也能生效，比如说color、border之类的。也就是这一次，我才找到此BUG的原因所在：当a:hover {}的属性跟a {}中的是一样的时候，也就是说a:hover没有发生属性的改变，完全继承a的属性的时候，就会产生此BUG。所以给a:hover {}定义一个属性值就能解决这个问题，至于定义什么值就看具体情况了，至少可以不用zoom这个看起来有hack嫌疑的属性咯。
前阵子碰到一个问题，就是在IE6中select会把浮动的DIV给挡住，通常情况都是用JS控制某个DIV显示隐藏的情况下发生的。这冲时候不管怎么设z-index值都没有用。
我也查了很多资料，说这是IE6的一个BUG（哎，万恶的IE6），解决的办法不外乎两种：1、用DIV模拟一个select出来。2、在隐藏层的底部加一个透明的iframe。第一种感觉花的工夫比较大，暂时就用第二种方法了，我这个原本用的是jquery的框架，这里我就把jquery的帖上来了。在你要调用的JS文件里加上这么一段：
1
2
3
4
5
6
7
8
9
10
11
12
| (function($){$.fn.bgIframe=$.fn.bgiframe=function(s){
if($.browser.msie&&/6.0/.test(navigator.userAgent))
{s=$.extend({top:'auto',left:'auto',width:'auto',height:'auto',opacity:true,
src:'javascript:false;'},s||{});var prop=function(n){
return n&&n.constructor==Number?n+'px':n;},html='<
iframe frameborder="0"tabindex="-1"src="'+s.src+'"'+'style="display:block;
position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;
filter:alpha(opacity=0);-moz-opacity:0;"/>';
return this.each(function()
{if($('> iframe.bgiframe',this).length==0)
this.insertBefore(document.createElement(html),this.firstChild);
});}return this;};})(jQuery); |
然后在你应用的页面调用
1
2
3
4
5
| <script>
$(document).ready(function(e){
$('.your_class').bgiframe();
})//其中your_class是被挡住的层的类名。
</script> |
