渐变色 filter:progid:DXImageTransform.Microsoft.Gradient 影响div的鼠标响应区域？

最新推荐文章于 2021-08-03 11:23:56 发布

最新推荐文章于 2021-08-03 11:23:56 发布 · 226 阅读

文章标签：

#javascript #ViewUI

本文探讨了在Internet Explorer浏览器中使用特定的CSS渐变色会导致div元素上的鼠标按下事件无法正常触发的问题，并提供了解决方案。

引用地址：http://nongfuit.com/problem/html_1246.aspx

我在CSS文件中设置了一个类以设置某div属性，其中加入了渐变色：

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr= '#C3DAF5 ', endColorStr= '#edf5ff ', gradientType=1);

在我的代码中，设置了对div的onmousedown事件，我在运行时发现只有点击该区块上文字才会触发事件，甚郁闷！！！我在网了查了下资料，加上了hasLayout的属性，依然不行。最后调试发现罪魁祸首居然是filter:progid:DXImageTransform.Microsoft.Gradient()，请问各位大侠这是什么原因引起的，thx！！

回答 1:

用这个渐变把

<div onMouseDown= "javascript:alert( 'aa '); "STYLE= "width:200px; FILTER: Alpha( style=1,opacity=25,finishOpacity=100,
startX=50,finishX= 100,startY=50,finishY=100);
background-color: skyblue; "> 渐变 </div>

解决方式可以参照Sina的Css，IE就背景色了

.seconenav .messagebox .mess_num{ border:2px solid #fff;
background-color:#ca0206;
background-image:-webkit-gradient(linear, left top, left bottom, from(#f59499), to(#ca0206));
background-image:-webkit-linear-gradient(top, #f59499, #ca0206);
background-image:-moz-linear-gradient(top, #f59499, #ca0206);
background-image:-ms-linear-gradient(top, #f59499, #ca0206);
background-image:-o-linear-gradient(top, #f59499, #ca0206);
background-image:linear-gradient(top, #f59499, #ca0206);
position:absolute; right:-2px; top:-6px; height:20px; line-height:20px;-webkit-border-radius: 18px;-moz-border-radius:18px;-ms-border-radius: 18px;border-radius: 18px; padding:0px 6px; color:#fff; font-size:14px;-webkit-box-shadow:2px 2px 12px #ccc; font-weight:900}