Shulou(Shulou.com)06/02 Report--

This article mainly introduces the "IE CSS Bug link image transparent part of the unclickable analysis", in the daily operation, I believe that many people in the IE CSS Bug link image transparent part of the problem of unclickable analysis have doubts, editor consulted all kinds of data, sorted out a simple and useful method of operation, hope to answer the "IE CSS Bug link image transparent part of the unclickable analysis" of the doubt is helpful! Next, please follow the editor to study!

Affect the version

The bug influences: IE8, IE7, IE6

Performance

The transparent part of the background image on the link cannot be clicked after the PNG transparency has been fixed with the 'filter' method.

Tutorial time

2009.7.19 15:03:44 on Sunday

Description

Problem: we use transparent PNG images as the background of the link and use filter method to solve the problem of alpha transparency under IE. And what happened to IE? The transparent part of the image becomes unclickable. Let's look at an example.

Demo

Because of the natural nature of this bug, the example is on a separate page

HTML code

Lorem Ipsum

CSS code

A {display: block; background: url (ring.png) no-repeat; width: 100px; height: 100px; text-indent:-999px;}

Conditional comment code

What do we have here? A link () with display:block applied, whose background sets a black circle image in PNG format, except for the black circle, all parts are transparent. We use the filter attribute that is only suitable for IE to fix the PNG transparent part of the IE heavy color. The question is? The transparent part of the circle in the IE is not clickable.

Solution method

The following is the solution to the above bug by type arrangement.

Solution (Javascript method)

Resolution date

2009.07.19 15:17:23

Resolve browser version

All affected versions

Description

Let me tell you a little secret: if we set background for our link, the bug will be fixed. But wait a minute, can we do this? Let's take a look at our example first.

Because of the natural nature of this bug, the example is on a separate page.

HTML code

Lorem Ipsum

CSS Code

A {display: block; background: url (ring.png) no-repeat; width: 100px; height: 100px; text-indent:-999px;}

Conditional comment

At this point, the study of "unclickable analysis of the transparent part of the link image in IE CSS Bug" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.