How to solve the problem that IE is not fully compatible with CSS3

This article mainly explains "how to solve the incompletely compatible quota problem of IE supporting CSS3". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to solve the incompletely compatible quota problem of IE supporting CSS3".

Until Internet Explorer 8, the IE series did not support CSS3. In order to do some common effects such as rounded corners and shadows in IE, you need to use some redundant and meaningless elements and pictures to make these effects. After getting tired of this, I want to solve these problems in a more concise, direct and CSS3-style way. Fortunately, even the much-criticized Internet Explorer itself is strong enough. The unique technology of IE can achieve some CSS3 effects very well.

Opacity transparency

The transparency of elements can be easily achieved with filters in IE.

The code is as follows:

Background-color:green

Opacity:. 4

Filter:progid:DXImageTransform.Microsoft.alpha (opacity=40)

Border-radius fillet / Box Shadow Box Shadow / Text Shadow text Shadow

You can use Vector Markup Language (VML) and javascript to achieve these effects in IE, and after referencing a HTC file, you can use these three CSS3 properties in IE browsers.

The code is as follows:

-moz-border-radius: 15px; / * Firefox * /

-webkit-border-radius: 15px; / * Safari, Chrome * /

Border-radius: 15px; / * Opera 10.5cm, IE6+ uses IE-CSS3*/

-moz-box-shadow: 5px 5px 5px # 000; / * Firefox * /

-webkit-box-shadow: 5px 5px 5px # 000; / * Safari, Chrome * /

Box-shadow: 5px 5px 50px # 000; / * Opera 10.5 million IE6 + using IE-CSS3 * /

Behavior: url (ie-css3.htc); / * reference ie-css3.htc * /

In fact, there are filters in IE to achieve shadow and drop-shadow effects

Shadow produces continuous, gradual shadows

The code is as follows:

Filter: progid:DXImageTransform.Microsoft.Shadow (color='#000000', Direction=145, Strength=10)

Shadows generated by drop-shadow have no shading change

The code is as follows:

Filter:progid:DXImageTransform.Microsoft.DropShadow (Color= "# 6699CC", OffX= "5", OffY= "5", Positive= "1")

The filter seems to conflict with existing htc scripts, or a feature: when both are enabled on the same element, the filter effect is transferred to its child elements.

Gradients gradient

A simple gradient filter is provided in IE

The code is as follows:

Background-image:-moz-linear-gradient (top, # 444444, # 999999); / * FF3.6 * /

Background-image:-webkit-gradient (linear,left top,left bottom,color-stop (0, # 444444), color-stop (1, # 999999); / * Saf4+, Chrome * /

Filter: progid:DXImageTransform.Microsoft.gradient (startColorStr='#444444', EndColorStr='#999999'); / * IE6+ * /

The gradual change in implementing IE is simple.

RGBA Transparency Color background

The gradient filter supports the color of RGBA, and the first two digits of startColorStr and EndColorStr are Alpha channel values. When you use an alpha channel to simulate a RGBA color background, you should remove its background-color attribute.

The code is as follows:

Background-color: rgba (0,255,0,0.6); / * FF3+, Saf3+,Opera 10.10, Chrome * /

Filter:progid:DXImageTransform.Microsoft.gradient (startColorStr='#9900FF00',EndColorStr='#9900FF00'); / * IE6+*/

Multiple Backgrounds multiple background pictures

In browsers that support CSS3 multiple background images, you can use the following statement to implement multiple background images:

The code is as follows:

Background: url (bg-image-1.gif) center center no-repeat, url (bg-image-2.gif) top left

To implement multiple background images in IE, add the following code to a separate IE hack stylesheet:

The code is as follows:

Background: transparent url (bg-image-1.gif) top left repeat

Filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='bg-image-2.gif', sizingMethod='crop'); / * IE6+ * /

Multiple backgrounds of CSS3 browsers

Multiple backgrounds of IE

Tranformations/rotate rotation element

There are two filters in IE that can realize the rotation of elements, BasicImage and Matrix, the former is simple and convenient, but can only do 90 °rotation (n ∈ {1 ∈ 2pm 3 Magi 4}); Matrix filter is powerful, but the parameters are complex.

The code is as follows:

-moz-transform: rotate (180deg); / * FF3.5+ * /

-o-transform: rotate (180deg); / * Opera 10.5 * /

-webkit-transform: rotate (180deg); / * Saf3.1+, Chrome * /

Filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=2)

Filter:progid:DXImageTransform.Microsoft.Matrix (sizingMethod='auto expand',M11=-1, M12=-1.2246063538223772e-16, M21=1.2246063538223772e-16, M22 colors 1)

Rotation is also very simple.

@ font-face server-side font

Considering the size of Chinese fonts, this CSS3 feature is not practical.

The code is as follows:

Font-family:'webFont'

Src:url ('myfont.eot'); / * IE6+*/

Src:local ('fontname'), / * font name * /

Url ('myfont.woff') format (' woff'), / * FF3.6*/

Url ('myfont.ttf') format (' truetype'); / * saf3+,chrome,FF3.5,opera10+*/

After the font is declared and referenced, you can use the font in font-family elsewhere on the page.

You can enable multiple filters on the same element, such as:

The code is as follows:

Filter: progid:DXImageTransform.Microsoft.Shadow (color='#000000', Direction=145, Strength=5) progid:DXImageTransform.Microsoft.Alpha (opacity=40)

Although some of the effects of imitating CSS3 with filters are hardly perfect, in some cases, the use of these techniques can make our code more concise and unified

Thank you for your reading, the above is the content of "how to solve the problem of incompatible quota of IE supporting CSS3". After the study of this article, I believe you have a deeper understanding of how to solve the problem of incompletely compatible quota of IE supporting CSS3, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!