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

Summary of ways to implement single sign-on in Vue

The project has been suspended recently, and the ...

Detailed explanation of Vue router routing guard

Table of contents 1. Global beforeEach 1. Global ...

Vue implements a simple magnifying glass effect

This article example shares the specific code of ...

How to add automatic completion commands for docker and kubectl on Mac

Introduction to kubectl kubectl is a command line...

Problems and solutions when installing and using VMware

The virtual machine is in use or cannot be connec...

What is the length of a function in js?

Table of contents Preface Why How much is it? Num...

How to use docker to deploy spring boot and connect to skywalking

Table of contents 1. Overview 1. Introduction to ...

Details of various font formats in HTML web pages

This section starts with the details of text modi...

HTML table tag tutorial (19): row tag

The attributes of the <TR> tag are used to ...

Detailed discussion on the issue of mysqldump data export

1. An error (1064) is reported when using mysqldu...

How to operate Docker and images

Find mirror We can search for images from the Doc...

Detailed graphic tutorial on installing and uninstalling Tomcat8 on Linux

[ Linux installation of Tomcat8 ] Uninstall Tomca...

Detailed explanation of Linux zabbix agent deployment and configuration methods

1. Install zabbix-agent on web01 Deploy zabbix wa...

Summary of various forms of applying CSS styles in web pages

1. Inline style, placed in <body></body&g...