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 tutorial on using VMware WorkStation with Docker for Windows

Table of contents 1. Introduction 2. Install Dock...

Design reference WordPress website building success case

Each of these 16 sites is worth reading carefully,...

JavaScript to implement voice queuing system

Table of contents introduce Key Features Effect d...

Case study of dynamic data binding of this.$set in Vue

I feel that the explanation of this.$set on the I...

Solution to the problem of MySQL data delay jump

Today we analyzed another typical problem about d...

Docker Compose installation methods in different environments

1. Online installation Currently only tried the L...

Solution for using Baidu share on Https page

Since enabling https access for the entire site, ...

CSS Transition expands and collapses elements by changing the Height

A common development need is that we want to coll...

Make your text dance with the marquee attribute in HTML

Syntax: <marquee> …</marquee> Using th...

Detailed explanation of mysql partition function and example analysis

First, what is database partitioning? I wrote an ...