Background .png and IE 6 - enforcing the world.
The following bug of the “popular” browser is known - pictures in the .png format, containing sections with alpha transparency are displayed incorrectly. Namely - the area of these sites is filled with gray color (thanks to dreamhelg for a concise description of the essence of what is happening in this case).
Today in his RSS feed I found a link to another article on the confrontation .png and IE. Probably, he took it, as the greater half of those who surprised the headline was higher - with prejudice (they say, again, twenty-five). Nevertheless, it turned out a lot of interesting things. For example, now background .png perfectly obey the
Immediately send all curious to the page with examples and explanations. Everything is implemented using JavaScript, which creates and assigns the necessary element of the page <DD_belatedPNG: rect /> (that is, our .png is “reborn” in VML).
In general, the script is quite raw. The first test was released just three days ago. Therefore, additional bugs may appear and the work of the script can be more resource-intensive than we would like. Nevertheless, I think that the thing made by Drew Diller ( Drew Diller , that is the name of the script's author) will be interesting to many, that's why I wrote this brief note.
')
UPD . A third version of the script has been released in which some flaws have been fixed. Including single-pixel indents to the left and above, the appearance of undesirable borders, scrolls, and also the ability to transfer functions to several selectors separated by commas (see the example code above).
Today in his RSS feed I found a link to another article on the confrontation .png and IE. Probably, he took it, as the greater half of those who surprised the headline was higher - with prejudice (they say, again, twenty-five). Nevertheless, it turned out a lot of interesting things. For example, now background .png perfectly obey the
background-position and background-repeat properties.Immediately send all curious to the page with examples and explanations. Everything is implemented using JavaScript, which creates and assigns the necessary element of the page <DD_belatedPNG: rect /> (that is, our .png is “reborn” in VML).
To work you need:
- download and connect to a JavaScript HTML document (on the page with examples there are two links - to regular and compressed files);
- inside the HTML document, run the function ( DD_belatedPNG.fix () ), which needs, as a parameter, to pass the element selector, on which we
perform themanipulationrite.
For example:
<! - [if IE 6]>
<script type = "text / javascript" src = "DD_belatedPNG.js"> </ script>
<script type = "text / javascript">
DD_belatedPNG.fix ('. Png_bg, .other_class'); // example of connecting classes
</ script>
<! [endif] -> What is special?
- unlike other fixes, it does not use the AlphaImageLoader, thereby not creating confusion in the order of the layers (changing the z-index after applying the filter);
- as mentioned above, the
background-repeatCSS andbackground-positionproperties now work; - at the same time, access to the element's style via element.style and working with the pseudo-class are supported : hover ;
- modest weight of the script - 4 KB in compressed form.
Disadvantages:
- it is impossible to specify
<body>as a selector, due to restrictions imposed by the feature of assigning VML to one or another DOM node; background-position:fixedproperty was not tested;Being a script struggling with the “background” trick of IE, it does not help to display .png translucent inside the tag;- The script does not work yet with the elements of the
<tr>and<td>tables.
In general, the script is quite raw. The first test was released just three days ago. Therefore, additional bugs may appear and the work of the script can be more resource-intensive than we would like. Nevertheless, I think that the thing made by Drew Diller ( Drew Diller , that is the name of the script's author) will be interesting to many, that's why I wrote this brief note.
')
UPD . A third version of the script has been released in which some flaws have been fixed. Including single-pixel indents to the left and above, the appearance of undesirable borders, scrolls, and also the ability to transfer functions to several selectors separated by commas (see the example code above).
Source: https://habr.com/ru/post/46597/
All Articles