This article shares the solution to the IE8+ compatibility problem I accumulated in the project. According to my practical experience, if you write HTML/CSS in the way recommended by W3C, and pay attention to the following points, then basically a large part of IE8+ compatibility issues are OK (the IE8+ here is mainly It refers to IE8. According to personal observation, the rendering effect of IE9+ is already very good).
Preliminary preparation
To test the compatibility of IE, it must be tested in Windows, and it is Win7+, because WinXP only supports IE8 at the highest, IE9 is fine! Most of the children's shoes for the web do not use Windows as a development environment, either a Linux distribution or a Mac OS. How to do? There are generally 2 methods:
1. Open a Windows virtual machine
2. Switch the development environment to Windows temporarily.
If your machine is fast enough, I recommend the former method. But if the machine does not work, it will be very stuck to open the virtual machine. If you are a Pythonista, my previous blog, "Building a Python Web Development Environment in Windows" may be of use to you.
I think I can focus on these browsers: IETester (IE8-IE9), 360 browser, Sogou browser, Chrome. After the IETester test, it is recommended to use the real IE8 and IE9 again, just in case.
DOCTYPE
First you need to make sure that your HTML page starts with a DOCTYPE declaration. DOCTYPE tells the browser what kind of HTML or XHTML specification to use to parse HTML documents, which will affect:
the constraints on tags, attributes, and properties
affect the browser's rendering mode, and different rendering modes will affect the browser's response to CSS. The parsing
DOCTYPE of code and even JavaScript scripts is very critical. The current best practice is to type in the first line of the HTML document:
<!DOCTYPE html>
The specific description of DOCTYPE will not be expanded. You can refer to: "The Correct Use of DOCTYPE", "CS002: DOCTYPE and Browser Mode Analysis".
Use meta tags to adjust how the browser renders
There is a concept of "compatibility view" in IE8. When IE8 was released, it has made great improvements compared to IE6/7, but many old sites are only optimized for IE6/7, and rendering using IE8 will be a mess. . In order to take care of these hard-working front-end engineers, IE8 has added the "Compatibility View" function, so that you can use the IE6 or IE7 kernel to render pages in IE8. This is of course not what we want, so we need to use the meta tag to force IE8 to use the latest kernel to render the page, the code is as follows:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
IE=edge means to force the use of the latest IE kernel, chrome=1 means that if the browser plug-in Google Chrome Frame for IE6/7/8 and other versions is installed (it can make the user's browser look like the menu and interface of IE, but When users browse the web, they actually use the Chrome browser kernel), then use the Chrome kernel to render. See this great answer on StackOverflow for a specific explanation of this meta tag.
There are many dual-core browsers in China, such as 360 browser and Sogou browser. How do they decide which kernel to use for rendering a page? The following is an official description of the new features of 360 browser v6:
Due to the well-known situation, the mainstream browsers in China are all dual-core browsers: based on the Webkit kernel, it is used for high-speed browsing of commonly used websites. The IE-based kernel is used to be compatible with online banking and old websites. Taking several 360 browsers as an example, we give priority to rendering mainstream websites through the Webkit kernel, and only a small number of websites are rendered through the IE kernel to ensure page compatibility. For a long time in the past, our main control method was a library of hundreds of kilobytes of URLs, a library of URLs collected through long-term manual operations.
Although we strive to improve the accuracy of browser automatic checking through user feedback and code tag intelligent judgment technology. But in many cases, we are still not 100% correct. Therefore, we have added a new control method: the kernel control Meta tag. As long as you add a Meta tag to your website to tell the 360 browser which kernel should be used to render this URL, the 360 browser will switch the corresponding kernel immediately after reading this tag. And apply this behavior to all URLs under this second-level domain.
The solution 360 has already told us that it is recommended to use Webkit through the meta tag, the code is as follows:
<meta name="renderer" content="webkit">
I didn't do a detailed investigation and don't know if other dual-core browsers support this feature.
Media Query
IE8 doesn't seem to recognize Media Query, so it needs to be hacked! It is recommended to use Respond.js to solve this problem. For specific methods, please refer to its documentation.
Implement some features of CSS3
IE8 does not support many new features of CSS3, but we can use some more mature hacking methods. I use CSS3 PIE , which supports these features: border-radius, box-shadow, border-image, multiple background images, linear-gradient, etc.
Identify HTML5 elements
If you use HTML5's new tags (nav/footer, etc.) in your front-end code, these tags may not display properly in IE. I use html5shiv , see the documentation for specific usage.
About max-width
Another problem that is often encountered in IE8 is max-width. The size of the image in the web page may be relatively wide. I will set it max-width: 100% to limit its width to the maximum width of the parent container, but sometimes But it didn't work, and I slowly learned the rules that IE parses max-width: it is strictly required that the width of the direct parent element is fixed. After experiments, it was found that the rules that Chrome follows are looser than IE, so this problem should not be classified as an IE compatibility problem, but I still mention it. Share two scenarios I encountered:(1) max-width
in td If you set max-width: 100% for the img element in td, you will find that it does not work in IE and Firefox, but it can be done in Chrome of. After querying, it is found that table-layout: fixed needs to be set for the table. For the specific explanation of this attribute, see W3School. (2) HTML structure
with max-width in nested tags as follows: <div class="work-item"> <a href="#" class="work-link"> <img src="sample.jpg" class="work-image img-responsive"> </a> </div> The outermost element .work-item is set to a fixed width, but setting max-width to 100% for img is invalid. Later, I found that it was necessary to Set width: 100% for the a tag, so that the innermost img tag can fill the entire div.
Padding elements overlap under nested inline-block
HTML代码：
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</ul>
CSS代码：
ul li{
display: inline-block;
}
ul li a{
display: inline-block;
padding: 10px 15px;
}
It stands to reason that the distance between the a tags should be 30px, but in IE8 there is an overlap, only 15px. My workaround is to use float: left instead of display: inline-block for horizontal layout.
placeholder
HTML5 attribute placeholder is not supported under IE8, but there are many js plugins to solve this problem, such as: jquery-placeholder .last-child
First-child is the content of CSS2, but last-child is not, so IE8 does not buy it. The recommended practice is not to use last-child, but to set a .last class for the last element, and then style it, so that it is all compatible.background-size: cover
If you want to use background-size: cover to set a full screen background, unfortunately IE8 can't do it... but you can use IE's unique AlphaImageLoader filter to achieve this, add a CSS style like this:filter: progid:DXImageTransform.Microsoft. AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)
set sizingMethod to scale and it is OK.
Not finished, if you put a link on top of this background, the link will not be clickable. The general solution is to add position:relative to the link or button to make it float relatively.
filter blur
CSS3 provides properties filter that supports filter effects, such as blur that supports Gaussian blur effect (similar to iOS7 effect):filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px );
The display effect of IE8 on filter: blur(10px) is to blur HTML elements in a small range. This effect is not Gaussian blur. To support Gaussian blur, the following settings are required:
filter: progid:DXImageTransform.Microsoft.Blur (PixelRadius='10');
A pit found in practice is that all elements with position: relative will not take effect.
Other findings are that IE9 has no effect on filter: blur(10px), while filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10'); is a blur effect for a small range of elements.
Well, that's about all the IE8+ compatibility issues I've encountered so far. I do a little bit of both front-end and back-end. The advantage of this is that a person can develop a website independently, but the disadvantage is that they are not precise in all aspects. If you have a very important addition, or a better solution, please let me know!
Original link: http://www.hustlzp.com/post/2014/01/ie8-compatibility