How to make ie support css3

How to make ie support css3: 1. Download "ie-css3.htc" and put it in the server directory for use; 2. Download the "css3 PIE.htc" file, and then put the "PIE.htc" file Upload to the website directory.

The operating environment of this article: Windows 7 system, Dell G3 computer, HTML5&&CSS3 version.

Method 1: Use ie-css3.htc

ie-css3.htc is an htc file that allows IE browser to support some CSS3 attributes, not just box-shadow, but also You can make your IE browser support the rounded corner attribute border-radius and the text shadow attribute text-shadow.

How to use it is: download it and put it in your server directory

Write the following code in your :

<!--[if IE]>
<style type="text/css">img, #testdiv, .testbox{behavior: url(http://yourdomain.com/js/ie-css3.htc);}
</style>
<![endif]-->

Method 2: Use the css3 pie plug-in

css3 pie is a plug-in that allows the IE browser to support some css3 attributes.

Official website: http://css3pie.com/

[Recommended learning: css video tutorial]

Usage:

Step 1: Download the css3 PIE.htc file

Step 2: Upload the PIE.htc file to your website directory. You can upload it to any directory, as long as you remember this directory.

Step 3: Create an html file, write a piece of css3 code, and introduce PIE.htc, as shown below:

#id {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(path/to/PIE.htc);
}

Note: The .htc file path is relative to the path of the html file , rather than relative to the css file.

Some known issues:

This method is not omnipotent and has some limitations and things that need attention.

1. Issues related to z-index

These CSS3 effects under IE are implemented with the help of VML. The VML draws the container element of the rounded corners or projection effect, and then the container element is used as the target element. After the sibling node is inserted, if the target element is position:absolute or position:relative, the css3-container element will be set to the same z-index value. In the DOM tree, elements at the same level are always covered later. The previous one, so this achieves coverage and avoids the possibility of other elements being inserted into it.

So, here comes the problem. If the position attribute of the current element is static, which is the default attribute, then the z-index attribute is useless and there is no override. Therefore, at this time, the CSS3 under IE browser Rendering will not succeed. The solution is also very simple, set the target element position: relative or set the ancestor element position: relative and assign a z-index value (cannot be -1).

2. The problem of equivalent paths

The behavior attribute of the IE browser is relative to the HTML document. It is different from other CSS attributes and is not relative to the CSS document. This makes using the pie.htc file inconvenient. If the absolute path is in the root directory, the CSS file is inconvenient to move; if the relative path is in the HTML document, the reusability of the pie.htc file in different HTML pages is greatly reduced. At the same time, URL attribute paths such as those behind border-image are also difficult to handle.

3. The problem of abbreviations

Use PIE to implement CSS3 rendering under IE (the same is true for other methods). Only abbreviated forms can be used, such as rounded corners. We can set border-top -left-radius means upper left rounded corner, but PIE does not support this writing method, it can only be an honest abbreviation.

4. Provide the correct Content-Type

If you want IE browser to support htc files, you need a content-type header with the words "text/x-component", otherwise, Behavior will be ignored. The vast majority of web servers provide the correct content-type, but some have problems.

If you find that the PIE method is invalid on your machine, that is, the htc file here refers to the pie.htc file is invalid, check your server configuration, it may need to be updated to the latest content-type. For example, for Apache, you can do the following in the .htaccess file:

AddType text/x-component .htc

However, for some reason, you cannot modify the server configuration (such as a public host, or a server provided by a space service provider), you You can use a PHP file to indirectly call the htc file. I just need to show you the code of this PHP file and you will know what it means, as follows:

<?php
header( &#39;Content-type: text/x-component&#39; );
include( &#39;pie.htc&#39; );
?>

Add a Content-type header containing the words "text/x-component" through the PHP file and call it at the same time pie.htc file.

Regarding the php file shown above, you can click here: pie.php (right click – [Target | Save link as]), or you can directly create a new php file and put the two above Copy the line of code into it. Or there is this php file in the wrappers folder of the original packaging resources provided in this article, but the name is in capital letters.

If you use the above php file, you need to put pie.php and pie.htc in the same folder. At the same time, the behavior in CSS should be written as:

behavior: url(pie.php);

The above is the detailed content of How to make ie support css3. For more information, please follow other related articles on the PHP Chinese website!