Home > Developer > Web Develop
Cross-browser compatibility is the Eternal Challenge of Web page creation. Although the browser vendors are trying to implement the new CSS3 standard features in their browsers, they are provided in an extended style, so prefixes such as-moz-,-webkit-,-ms-,-O, and so on will persist for a long time in the future.
In addition, while the browser vendors who are interested in expanding their markets offer new features of CSS3, it is also necessary to be forward-compatible with older browsers, in view of the compatibility between browsers, since their older versions of browsers still exist on the user's host (mainly Microsoft's ie6,7,8).
These old-fashioned browsers (low-version IE) do not support the problem of CSS3, is really a hindrance to the CSS3 era of a major obstacle.
Unfortunately, when ie in contempt of the standard, the filters filter has a long-term perspective. In these filters filters, a lot of the effect is what we CSS3 in the current implementation.
For filters filters, we do not recommend using them alone, only as a choice when resolving compatibility.
below we will resolve the issue of the following low-version browsers :
1. No support for transparent PNG under IE6;
2. ie6,7,8 Shadow (Box-shadow,text-shadow) effect is not supported;
3. ie6,7,8 gradient (gradients) effect is not supported;
4. ie6,7,8 is not supported for RGBA (generally used to make translucent layers).
1. Resolve IE6 not supported for 24-bit transparent PNG
The first problem is very common, there are two solutions,
One is to use IE filter: AlphaImageLoader
After using this filter, there are still some problems that can not be remedied, such as the repeat of the film and so on.
2. Resolve the ie6,7,8 of the Shadow (Box-shadow,text-shadow) effect
Many websites now employ many CSS3 styles for aesthetics, with the highest Box-shadow and Text-shadow usage.
Let's use the blur and DropShadow filters to achieve this effect in ie6,7,8:
<! Doctype html>IE filters must be triggered in the case of haslayout to take effect (except IE8, it has abandoned the Haslayout this private property), which is why we added a zoom:1 there;
In addition, when you use the DropShadow filter for text shading, you should not use background, otherwise the shadow effect is on the background, so we add the DropShadow filter to span instead of the Class=shadow layer.
To do the Box-shadow effect, we also add a layer of Class=ieshadow, and then use the blur filter to simulate. In fact, there is a shadow filter in the filter, can not need this extra layer, but the effect is not good, so we did not use.
Below, we do a demo that is compatible with all browsers.<!Doctype HTML> <HTML> <Head> <MetaCharSet= "UTF-8" /> <title>Block Shadows (Firefox,safari, Chrome,opera) and text Shadows (Firefox 3.1,safari,opera,chrome)</title> <styletype= "Text/css">Body{position:relative;Color:#c00;font-family:' Blackbody ';font-size:20px;background:#cfc; }. Shadow{width:200px;Height:100px;background:#fff;Border:1px solid #ccc;Box-shadow:1px 1px 10px rgba (200,200,200,0.9);-webkit-box-shadow:1px 1px 10px rgba (200,200,200,0.9);-moz-box-shadow:1px 1px 10px rgba (200,200,200,0.9); }. Shadow span{Zoom:1;Filter:Progid:DXImageTransform.Microsoft.dropShadow (color=cccccc,offx=2,offy=1,positive=true);Text-shadow:2px 1px 2px #ccc; }. Ieshadow{Display:None;Display:block\9;position:Absolute;width:200px;Height:100px;Z-index:-1;background:#ccc;Top:-5px; Left:-5px;Filter:Progid:DXImageTransform.Microsoft.Blur (pixelradius= ' 6 ', makeshadow= ' true ', shadowopacity= ' 0.2 '); } </style> </Head> <Body> <Divclass= "Wrap"> <Divclass= ' Ieshadow '></Div> <Divclass= ' Shadow '> <span>Text Shadow</span> </Div> </Div> </Body> </HTML>View Code3. Solve the ie6,7,8 gradient (gradients) effect is not supported
Since the gradient gradient this CSS3 attribute, many design effects we do not need to cut the diagram, the direct use of code can be achieved, and relative to the image is less restrictive.
We can use the gradient filter in order to compensate for the gradient not supported in the low version of IE.
IE's gradient filter only supports linear gradients, and only two gradients can be set, but note here that this gradient color sets alpha transparency.We are looking at the compatibility of each browser, unfortunately opera does not support.
<! Doctype html>4. Solve the ie6,7,8 of RGBA (generally used to do translucent layer)
This fourth problem is very common, and the solution under the low version of IE is ubiquitous on the internet, which is the effect of translucent layer.
Because IE does not support rgba colors, we generally use the IE alpha Filter to achieve translucency, but, like the Box-shadow example above, this alpha filter and the blur filter above are for all child elements within the layer element and include text nodes. So, once the alpha filter is used, everything underneath this element is transparent, which is often inconsistent with what we want.
The general solution on the web is the same as the above simulation Box-shadow blur filter, the transparent layer is extracted separately into a layer.This method is generally used, but the extra layer is a bit superfluous, and sometimes it's more troublesome to control it.
We can change the filter method: In the above gradient filter, we mention that gradients can also use alpha semitransparent values, and the gradient filter is for the background of the element, the element content is not affected by it.
then we can do this :Obviously the structure, the style is much simpler, and then do other browser compatibility:
Although we have solved four kinds of low version of IE under the shortcomings, but in the process of some of the problem is slightly more complicated, and in the specific application of the situation may not be so simple, the reader should understand after the extension.
In addition to the above four kinds of problems are resolved, there are too many CSS3 effect in the low version of IE is not possible, we have to (in the lower version of the browser) to give up, the most regrettable is the CSS3 fillet effect, of course, using VML is also able to solve, encapsulation method: Curved Corner , like Dd_belatedpng, I suggest that the reader should adopt it carefully.Source: http://www.bitscn.com/school/HTMLCSS/201301/285451.html
[Go] Use the filters filter to compensate for cross-browser issues with CSS3 and compatible with low-version ie
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
