分类 建站 下的文章

绝对定位的a链接不可点击 IE6-IE9无一幸免的bug

最近遇到一个很奇怪的问题,IE6 IE7 IE8 IE9 全军覆灭。
现象:
应该是比较常见的,有时候为了让整块区域可点击,可能使用一个a标签,然后设置display:block等来让a标签可设置长宽;但是,a标签内部如果需要添加比较多的内容,比如好几个div,那么这么做就不符合规范了。
于是变通地让这个a标签设置position为绝对定位,然后移动覆盖到相应的位置来实现某个区域可点击。
如下图:

IE10以下,绝对定位的a标签不可点击bug

但是在IE10以下,a标签有的部分不可点击,比如上面部分的图片部分,鼠标移上去就变成了文本形状,而本应该是手型的。
这是一个IE系列的渲染bug,只有渲染部分是可点击的。而让其所有部分都可点击的话,简单,为其设置一个背景即可。可以设置一个透明的gif图片,不过会增加一个请求。还有一个方法是使用background:url(about:blank);得到同样的效果但是不产生http请求。

- 阅读剩余部分 -

IE6下面line-height失效?

没道理啊,明明IE6是支持line-height的。后来搜索了一下,发现这是IE6的bug。当在一个容器里文字和img、input、textarea、select、object等元素相连的时候,对这个容器设置的line-height数值会失效; 比如

......
<p>姓名<textarea>...</textarea></p>
<p>手机<textarea>...</textarea></p>
......

这种情况下对P设置line-height在其它浏览器正常,但是IE6下面是无效的。

解决办法:对和文字相连接的img、input、textarea、select、object等元素增加样式属性,一般用margin。比如本次例子就对textarea设置了下面的属性:

margin:(希望的line-height-自身高度)/2px 0;
vertical-align:middle

IE6这个魂淡,从趋势图来看时日不多了,已经。

IE6/IE7下margin-top失效

遇到一个margin-top在IE6/IE7失效的情况,第一反应是margin折叠引起的,但是又一看发现不是,上网查找,果然这是一个bug。

表现如下,文字块设置了margin-top:80px,在IE6/IE7下面查看这个页面,文字块那里直接顶在了它的父级的顶部,而其它浏览器查看,其margin-top是有效的。

小强的这篇文章帮助下,一番研究之后知道了原因:一个块级元素,触发了hasLayout(比如设置了宽度高度),并且其前面紧挨着的同级的节点如果为absolute绝对定位,就会导致这个块级元素在IE6/IE7下面的margin-top失效,看起来就像margin-top:0一样。

点击查看DEMO

解决办法有两个:

1.使用padding来代替margin,比如设置其父元素的padding-top,或者设置这个块元素的padding-top,不过要注意padding对其背景的影响。

2.使这个块不直接跟在前面的这个绝对定位元素后面,比如在它们之间插入一个空div标签,或者交换这两个标签的前后位置。

欢迎转载,不过请注明来处:Bobscript