开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

progid:DXImageTransform.Microsoft.AlphaImageLoader导致链接在ie8,ie7和ie6中无法点击

progid:DXImageTransform.Microsoft.AlphaImageLoader是一种IE浏览器特有的CSS滤镜属性，用于实现透明PNG图片在低版本IE浏览器中的显示。然而，该属性在IE8、IE7和IE6中会导致链接无法点击的问题。

在这些低版本的IE浏览器中，当使用progid:DXImageTransform.Microsoft.AlphaImageLoader属性加载透明PNG图片时，会将图片作为背景图层覆盖在链接上方，导致链接无法被点击。这是由于AlphaImageLoader属性的实现机制导致的。

为了解决这个问题，可以采取以下几种方法：

使用JavaScript替代AlphaImageLoader属性：可以通过JavaScript代码来检测浏览器版本，如果是IE8、IE7或IE6，则使用JavaScript动态创建图片元素，并设置其src属性为透明PNG图片的路径，然后将该图片元素插入到链接内部，从而实现透明PNG图片的显示和链接的可点击性。
使用CSS Hack：可以使用CSS Hack来针对不同版本的IE浏览器设置不同的样式，以解决链接无法点击的问题。例如，可以使用条件注释（Conditional Comments）来针对IE8、IE7和IE6设置不同的样式，将AlphaImageLoader属性应用于背景图层而不是链接本身。
使用其他技术替代透明PNG图片：考虑到透明PNG图片在低版本IE浏览器中的兼容性问题，可以考虑使用其他技术替代透明PNG图片，如使用GIF图片或使用CSS3的opacity属性来实现透明效果。

总结起来，解决progid:DXImageTransform.Microsoft.AlphaImageLoader导致链接无法点击的问题可以通过使用JavaScript替代AlphaImageLoader属性、使用CSS Hack或使用其他技术替代透明PNG图片来解决。具体选择哪种方法取决于项目需求和开发团队的技术偏好。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
腾讯云CDN（内容分发网络）：https://cloud.tencent.com/product/cdn
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云云安全中心：https://cloud.tencent.com/product/ssc
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发：https://cloud.tencent.com/product/mobile
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
腾讯云游戏多媒体引擎：https://cloud.tencent.com/product/gme
腾讯云视频处理服务：https://cloud.tencent.com/product/vod

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

记录Ally项目的点点滴滴(二)-corlorbox and iframe

根据客户的要求，我们需要在IE7，IE8，火狐，google和Safari5种浏览器下进行测试，那么问题出现了。　　...1，项目中，我们使用了jquery.colorbox.js 来实现提示的窗体，在IE7下面，提示框的边框成了黑色。如下， ? 　　...下，图片的边框阴影无法显示；　　解决方案：colorbox.css中修改，把它的src路径修改成相对于本项目的相对路径。....cboxIE #cboxTopLeft { background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader...之前因为没有考虑到Safari的兼容性，造成无法显示问题，最后修改JS函数为： document.getElementsByName("frmTemplateImg")[0].contentWindow.document.getElementById

6952 0

兼容IE、新版Chrome、Firefox，实现本地图片等比例缩放预览

以前转载过一篇《兼容IE8、火狐的本地图片预览+等比例缩放》的文章，时至今日在新版的Chrome和Firefox上已经不能用了，原因getAsDataURL方法已经失效。...text/css"> #preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;} #imghead {filter:progid...evt.target.result;} reader.readAsDataURL(file.files[0]); } else { var sFilter='filter:progid...> 以上在IE6...、IE7、IE8、Chrome 13.0.x、Firefox 10.0测试通过。

1.4K2 0

CSS-各种cs样式之浏览器兼容处理方式汇总大全（更新中...）

/image/btn_show.png); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod...和ie7识别*/ *zoom: 1;/* 触发ie6和ie7下的haslayout */ zoom:1; /* 另一种是不加星号的，我觉得还是加星号吧，因为*只ie6/7识别，而标准的浏览器又不需要这么废话...总结就是：我自己当前版本的页面中少写了一个：.clearfix { *zoom:1;} 结果就导致ie姥爷的难受涉及到浮动的地方都会和正常浏览器不一致。。。。看来这不能省啊。...参照 menubar，给 a 和 menubar 设置高度是为了避免底边显示错位，若不设 height，可以在 menubar 中插入一个空格。...9、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： div{margin:30px!

1.6K5 0

Dreamweaver PHP 图片上传:

Mysql 编程基础目的练习 Dreamweaver 服务器行为应用了解 PHP 文件上传了解 Javascript 表单验证和 Dom 操作 ==== 12月13日修正在 IE7 下图片预览问题...==== 在 IE6 中，可以通过更改 img 的 src 属性实现本地图片预览，但是 IE7 也限制了本地图片的预览，这种办法已无法显示图片。...不过 IE7 下可以用 AlphaImageLoader 来实现图片的预览。AlphaImageLoader 可以在对象容器边界内，在对象的背景和内容之间显示一张图片。需要修改的内容： 1....在HTML 的 head 区域加入 CSS 代码： #imgview { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod...Javascript 代码中的 “y.src = x.value;” 修改为 “y.filters.item(“DXImageTransform.Microsoft.AlphaImageLoader”)

4.5K2 0

ie6不支持PNG图片解决办法（季雨林代码收集）

IE6下PNG背景透明的解决办法 .pngImg 注意上文的_号，目前IE7,8以及Firefox浏览器等都不支持此CSS语法，只有IE6识别。...二.滤镜filter解决IE6下背景灰 background:url(a.png) repeat-x 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader...缺陷：IE6下背景无法平铺，这个问题很严重。同时在性能上也有小问题，页面中次数不是很多的时候该办法还是可行的。...AlphaImageLoader滤镜会导致该区域的链接和按钮无效，解决的办法是为链接或按钮添加：position: relative;这样条代码，使其相对浮动。...AlphaImageLoader无法设置背景的重复，所以对图片的切图精度会有很高的精确度要求。 ie6不支持PNG的24位，只要改成PNG8就好了。

8373 0

最近遇到的兼容性问题和适配问题

: 1; *display: inline; 　　原理：IE7及以下识能别到 *[属性key]，利用IE7中inline-block表现为block可以设置宽高，然后利用*zoom触发重排，利用...Hack */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../.....3、IE10、IE11、IE edge中 flex + min-height 导致高度丢失　　解决方法：参考 solved-by-flexbox ：https://github.com/philipwalton...@media screen and (max-width: $min-width) { min-width: 0px; ... } 　　原理：IE7中和Android4.3版本也不支持...2、IOS9中光标定位问题：　　在Vue2.4版本以下，nextTick实现是以MO和Promise为优先的策略，（MO和Promise都为MicroTask，优先执行）　　当一个input值改变事件如有有

1.6K9 0

【CSS使用技巧】

CSS重置 CSS重置用于取消浏览器的内置样式，请参考YUI和Eric Meyer的样式表。 17....:progid:DXImageTransform.Microsoft.AlphaImageLoader 　　　　　　　　(src=”image.png”, sizingMethod=”crop”);...dos { color: red } 　　/* IE7, FF, Saf, Opera */ 　　html>body #tres { color: red } 　　/* IE8, FF, Saf.../* Everything but IE6 */ 　　#diecisiete { color/**/: blue } 　　/* IE6, IE7, IE8 */ 　　#diecinueve {...color: blue9; } 　　/* IE7, IE8 */ 　　#veinte { color/***/: blue9; } 　　/* IE6, IE7 — acts as an !

7742 0

CSS使用技巧

CSS重置 CSS重置用于取消浏览器的内置样式，请参考YUI和Eric Meyer的样式表。 17....:progid:DXImageTransform.Microsoft.AlphaImageLoader 　　　　　　　　(src='image.png', sizingMethod='crop');...#dos { color: red } 　　/* IE7, FF, Saf, Opera */ 　　html>body #tres { color: red } 　　/* IE8,...　　/* Everything but IE6 */ 　　#diecisiete { color/**/: blue } 　　/* IE6, IE7, IE8 */ 　　#diecinueve...{ color: blue\9; } 　　/* IE7, IE8 */ 　　#veinte { color/*\**/: blue\9; } 　　/* IE6, IE7 -- acts

1.2K1 0

CSS使用技巧

在IE6中设置PNG图片的透明效果　　.classname { 　　　　background: url(image.png); 　　　　_background: none; 　　　　_filter...:progid:DXImageTransform.Microsoft.AlphaImageLoader 　　　　　　　　(src='image.png', sizingMethod='crop');...{ color: red } 　　/* IE7, FF, Saf, Opera */ 　　html>body #tres { color: red } 　　/* IE8, FF, Saf, Opera...Everything but IE6 */ 　　#diecisiete { color/**/: blue } 　　/* IE6, IE7, IE8 */ 　　#diecinueve { color:...blue\9; } 　　/* IE7, IE8 */ 　　#veinte { color/*\**/: blue\9; } 　　/* IE6, IE7 -- acts as an !

1.3K1 0

CSS3常用功能的写法

:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#ffffff'); /* IE6,IE7 */ 　　-ms-filter...: "progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#ffffff')"; /* IE8 */ }...,IE7 */ 　　-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr...(startColorstr='#99B4B490',endColorstr='#99B4B490'); /* IE6,IE7 */ 　　-ms-filter: "progid:DXImageTransform.Microsoft.gradient...',endColorstr='#99B4B490'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr

7522 0

常见的html、css以及javascript兼容方案

：下载视频 2. display:inline-block;在ie6、ie7下只有设置在默认显示方式为inline...的元素上才会生效，请实现兼容ie6、ie7的通用的方式。...及以下版本（高版本会直接使用display: inline-block;）当hasLayout和inline在一起的时候，就触发了inline-block的行为在IE7及以下版本。..., offX=20, offY=20, positives=true); IE7、8： image.png 第二种方法： filter: progid:DXImageTransform.Microsoft.Shadow...JSON.stringify函数在ie6/7中不支持，如何兼容？ if(!

1.9K1 0

CSS-项目中遇到IE兼容问题，处理随笔

*background: deeppink; ~ie7及以下 _background: green; ~ie6及以下总的来说就是，顺序就是： background: red; .../study/201607/ie7-ie8-border-radius.html 八、怎么写针对ie9的hack，因为他总是和ie8共用样式，或者单独针对ie8的也行。...background: blue\9; background: goldenrod\0/; 今天用颜色做测试的时候，这么写，确实可以让ie8和9的样式不一样。...-- JiaThis Button END --> 21 22 23 2017-07-05 11:28:18 九、z-index在ie和火狐中的不同解析...以下 3 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='..

2K7 0

CSS常见兼容性问题总结

这里谈到的浏览器，主要指IE6/IE7/IE... FireFox Chrome Opera Safari 等。...比如 * 可以被IE6/IE7识别，但 _ 只能被IE6识别，IE6-IE10都可以识别 "\9"，IE6不能识别!...important; /* IE7 FF */ width: 110px; /* IE6 */ 因为!...important; color: #000;} test1 test2 说明：在标准模式中 “-″减号是IE6专有的hack “\9″ IE6/IE7/IE8/IE9...:center;} (16)IE6下div高度无法小于10px 　　比如定义一条高2px的线条，FF和IE7都正常 ?

1.1K3 0

CSS兼容性的一些Hack方法

important;color:green; 棕色 N N Y N Y N Y N Y Y 说明：在标准模式中 “-″减号是IE6专有的hack “\9″ IE6/IE7/IE8/IE9/IE10都生效.../7下可能无法正确显示，导致结果显示为白色背景*/ background-color:red; /* All browsers */ background-color:blue !...- for ie6 */ } /*demo3 实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack，注意顺序 IE6显示为：红色， IE7显示为：蓝色， IE8显示为：绿色，...我们常说的IE7专有*+hack的格式是*+html selector，而不是上面的直接在属性上加*+前缀。...demo2实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack，注意顺序 IE6显示为：绿色， IE7显示为：黑色， IE8显示为：红色， IE9显示为：蓝色， Firefox

1.2K3 0

CSS在IE6、7、8中的差别

支持情况 IE6 No IE7 Yes IE8 Yes Bugs IE7中，如果在父级标签和子级标签之间有一个HTML注释，子选择器将不会工作。... 支持情况 IE6 No IE7 Yes IE8 Yes Bugs IE6好像支持这种情况，因为它能匹配链中的最后一个class到使用该...支持情况 IE6 No IE7 Yes IE8 Yes 链伪类示例: a:first-child:hover { color: #0f0; }...支持情况 IE6 No IE7 No IE8 Yes Bugs IE6 和IE7 不支持inherit 值除了direction 和visibility...支持情况 IE6 No IE7 No IE8 Yes 重要bug和不兼容性问题下面是在上文中没有提到的IE6和IE7的众多bug。

1.3K3 0

第141天：前端开发中浏览器兼容性问题总结（二）

; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); _background-image:...4、IE6/IE7的这个Bug可以通过给li中的div设置vertical-align:top|middle|bottom解决。 28....去除链接虚线边框的问题问题：当点击超链接后，ie6/7/8 ff会出现虚线边框 ,而opera、safari没有虚线边框解决： ie6/7中设置为a {blr:expression_r(this.onFocus...=this.blur()) } ie8 和 ff 都不支持expression 在ie8 、ff中设置为 :focus { outline: none; } 38. css滤镜的问题问题： ...子容器宽度大于父容器宽度时，内容超出问题：子DIV的宽度和父DIV的宽度都已经定义，在IE6中如果其子DIV的宽度大于父DIV的宽度，父DIV的宽度将会被扩展，在其他浏览器中父DIV的宽度将不会扩展

1.9K2 1

CSS代码片段

moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5; /* Good browsers */ opacity: 0.5; } 对SEO和可访问性友好的隐藏元素的方法...left: -9999px; } 如果是一个元素用背景图来代替文本，需要隐藏文本，可用 .text{ text-indent: -9999px; } 注意：如果不合适的使用这种方法，会导致搜索引擎将该页面列为黑名单...标出页面中存在问题的元素（Diagnostic CSS） /* 空元素 */ div:empty, span:empty, li:empty, p:empty, td:empty, th:empty {...对某个具体的标准设备的Media Queries 见 https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 去除IE6...(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader

9072 0

前端必看!各大浏览器 CSS Hack 收集

：IE8、IE9支持 4、各种CSS hack情况介绍 1.区别IE和非IE浏览器 #tip{ background:blue; background:red9; } 2.区别IE6,IE7,IE8...; } 【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读取「_」，至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分...important; *background:orange; } 【说明】：IE7可以辨识「*」和「!important」，但是IE6只可以辨识「*」，却无法辨识「!...」(米字号)，但IE6可以辨识「_」(底线)，IE7却无法辨识，透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。...//IE7 _color:#EBEBEB； //IE6 } 可以看出，利用字符识别无法区分IE8和IE9，我们可以从伪类的识别来区分 element{ color：#6669；?????

1.6K13 0

30+有用的CSS代码片段

/***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child...+html #dos { color: red } /* IE7, FF, Saf, Opera */ html>body #tres { color: red } /* IE8, FF...*/ #once { _color: blue } /* IE6, IE7 */ #doce { *color: blue; /* or #color: blue */ } /* Everything...but IE6 */ #diecisiete { color/**/: blue } /* IE6, IE7, IE8 */ #diecinueve { color: blue\9; }.../* IE7, IE8 */ #veinte { color/*\**/: blue\9; } /* IE6, IE7 -- acts as an !

9566 0

30+有用的CSS代码片段

/***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child...+html #dos { color: red } /* IE7, FF, Saf, Opera */ html>body #tres { color: red } /* IE8, FF, Saf...*/ #once { _color: blue } /* IE6, IE7 */ #doce { *color: blue; /* or #color: blue */ } /* Everything...but IE6 */ #diecisiete { color/**/: blue } /* IE6, IE7, IE8 */ #diecinueve { color: blue\9; } /* IE7..., IE8 */ #veinte { color/*\**/: blue\9; } /* IE6, IE7 -- acts as an !

4873 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭