Let IE6, IE7, IE8 support CSS3 rounded corners and shadow styles

Let IE6, IE7, IE8 support CSS3 rounded corners and shadow styles
I want to make a page using CSS3 rounded corners and shadow effects, but IE browser does not support it. I have heard that there are plug-ins that can achieve this. I found a method on the Internet on Saturday. The original text is as follows:
All front-end engineers know that IE6, IE7, and IE8 do not support or do not fully support CSS3 properties.
CSS3 has many powerful and beautiful effects, such as rounded corners, shadows, gradient transparency, gradient background, and so on.
Because in the IE6 era, there were no standards, and for various reasons, IE6 users would hardly update their IE versions.
One way to make IE6, IE7, and IE8 support CSS3 effects is to use VML simulation.
VML stands for Vector Markup Language, which was originally developed by Microsoft itself and is very powerful.
In other words, VML can be used to create rounded corners under IE. Translucency, shadows, gradient backgrounds.
As early as last year, some foreigners wrote this idea into a plug-in to facilitate development by front-end programmers. . .
It can make IE6, IE7, IE8 support CSS3 special effects...
There has always been a serious bug in the previous bug. When I checked it today, the official fixed this bug and added a js rendering method (previously it was imported using behavior).
 
See how to call:
1. Load the PIE.js script on your web page.
Note that IE-specific comments are used to prevent non-IE browsers from downloading.
Copy code
The code is as follows:
<!--[if lt IE 10]> <script type="text/javascript" src="PIE.js"></script> <![endif]--> 2. Call with js: $(function() { if (window.PIE) { $('.rounded').each(function() { PIE.attach(this); }); } });
3. It’s done. Of all the plugins that allow IE6 to support CSS3, this one is probably the best. Official real-time test example: http://css3pie.com/ Official download: http://css3pie.com/download-latest I tested it for a long time but it didn't work. I was too careless and overlooked two points. First, the local preview was invalid and had to be transferred to the server environment or the local server environment. Second, I forgot to add behavior: url(pie.htc); in the css. Today I finally tested it, but a new problem came up. I used adaptive width, and a horizontal scroll bar appeared after adding it. I just removed it, and it was normal in other situations. It also seemed to have no effect on text shadows. I wonder if you have encountered such a problem. If you want to use it, you can try it.

<<:  TypeScript Enumeration Type

>>:  Summary of methods to prevent users from submitting forms repeatedly

Recommend

Detailed explanation of fs module and Path module methods in Node.js

Overview: The filesystem module is a simple wrapp...

Complete steps to reset the root user password in mysql8

Preface Recently, many new colleagues have asked ...

Notes on configuring multiple proxies using vue projects

In the development process of Vue project, for th...

Steps for Vue to use Ref to get components across levels

Vue uses Ref to get component instances across le...

Super detailed basic JavaScript syntax rules

Table of contents 01 JavaScript (abbreviated as: ...

Learn asynchronous programming in nodejs in one article

Table of Contents Introduction Synchronous Asynch...

A detailed guide to custom directives in Vue

Table of contents 1. What is a custom instruction...

Page Speed ​​Optimization at a Glance

I believe that the Internet has become an increas...

MySQL backup table operation based on Java

The core is mysqldump and Runtime The operation i...

Detailed explanation of jQuery method attributes

Table of contents 1. Introduction to jQuery 2. jQ...

HTML markup language - form

Click here to return to the 123WORDPRESS.COM HTML ...