Home > Developer > JavaScript
IE8 + compatibility experience and ie8 compatibility
Recently, I have used the Flask + Bootstrap3 framework combination for development. This article describes how to solve IE8 + compatibility issues in this technical combination. Based on my practical experience, if you write HTML/CSS in the W3C-recommended way, then the following points have been noticed, A large part of IE8 + compatibility issues are okay (here, IE8 + mainly refers to IE8. According to my personal visual test, the rendering Effect of IE9 + is already very good ).
PreparationsTo test IE compatibility, you must test IE compatibility in Windows and use Windows 7 +, because WinXP only supports IE8 and IE9! Most Web shoes do not use Windows as the development environment, either the Linux release or Mac OS. What should I do? There are two methods:
If your machine is fast enough, I recommend the previous method. But I used to develop it on a second-hand computer. I just got stuck on a VM, So I adopted the second method. If you are a Pythoner, the previous article "build a Python Web development environment in Windows" may be of some use to you.
Then, you need to install the browser used for testing in Win7 and check Baidu's share of the browser in the last month:
I think the things to be tested are probably IE11, IETester (IE8-IE9), 360 browser, sogou browser, Chrome, Firefox, Safari for Windows. We recommend that you use IE8 and IE9 to test IETester after testing, just in case. Safari is better to find an Apple device for test.
DOCTYPEMake sure that the DOCTYPE Declaration is available at the beginning of your HTML page. DOCTYPE tells the browser what HTML or XHTML specifications are used to parse HTML documents. The specific impact is as follows:
DOCTYPE is critical. Currently, the best practice is to type in the first line of the HTML document:
<!DOCTYPE html>
DOCTYPE is not described in detail. For details, refer to: Correct Use of DOCTYPE and CS002: DOCTYPE and browser mode analysis.
Adjust the rendering method of the browser using the meta tagThere is a concept of "Compatibility View" in IE8. When IE8 was released, it had greatly improved compared with IE6/7. However, many old websites only optimized IE6/7, rendering with IE8 is a mess. To take care of these hard-pressed front-end engineers, IE8 has added the "Compatibility View" function so that IE6 or IE7 kernel can be used in IE8 to render pages. This is 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=edgeIndicates that the latest IE kernel is forcibly used,chrome=1Indicates that if Google Chrome Frame is installed with browser plug-ins for IE6/7/8 or other versions (which can make the user's browser look like IE's menu and interface, but when the user browses the webpage, actually, the Chrome browser kernel is used), so the Chrome kernel is used for rendering. For more information about the meta tag, see StackOverflow.
There are many dual-core browsers in China, such as 360 browsers and sogou browsers. How do they decide which kernel rendering is used for a page? The following is an official description of the new features of 360 browser v6:
As we all know, mainstream browsers in China are dual-core browsers: Based on the Webkit kernel, they are used for high-speed browsing of common websites. The IE-based kernel is used for compatibility with online banking and old websites. Taking several browsers of 360 as an example, we first use the Webkit kernel to render mainstream websites. 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 website library of several hundred kb and a website library collected through long-term manual operation.
Although we strive to improve the accuracy of automatic core-cutting of browsers through user feedback and intelligent judgment of code tags. However, in many cases, we still cannot reach hundreds of entries. Therefore, we have added a new control method: the kernel controls the Meta tag. As long as you add a Meta tag to your website and tell the 360 browser which kernel should be used for rendering the URL, the 360 browser will immediately switch the corresponding kernel after reading the tag. And apply this behavior to all the URLs under this second-level domain name.
Solution 360 has already told us that we recommend using Webkit through meta tag. The Code is as follows:
<meta name="renderer" content="webkit">
I did not conduct a thorough investigation and I do not know whether other dual-core browsers support this feature.
Media QueryBootstrap3 uses a large number of Media Query features, but IE8 does not seem to be able to recognize them, so you need to hack it! The official document of Bootstrap3 has provided detailed instructions on browser compatibility. We recommend using Respond. js to solve this problem. For details, refer to the document.
Note that attributes declared for Bootstrap3 media query (for example.containerIf Respond. js works in browsers that do not support media query, your overwrite style will be overwritten again. My solution is to add!important.
IE8 does not support many new features of CSS3, but we can use some mature hack methods. I use CSS3 PIE, which supports the following features: border-radius, box-shadow, border-image, multiple background images, and linear-gradient.
The official document provides two usage methods: one is to introduce the. htc file, and the other is to use PIE. js. If you use the first method (officially recommended), you need to set the Content-Type of the. htc filetext/x-component. If you host this file through nginx, you only need to add a MIME rule to the Nginx configuration file. I suggest using Flask to host it (put it in the static folder), which is more convenient, and then just add the following code:
import mimetypesmimetypes.add_type('text/x-component', '.htc')
Special note: Read the Know Issues provided by css pie.
Recognize HTML5 ElementsIf you use HTML5 new labels (such as nav and footer) in the front-end code, these labels may not be displayed normally in IE. I use html5shiv. For more information, see the document.
About max-widthAnother problem frequently encountered in IE8 is max-width. The size of the image on the webpage may be relatively wide. I will set itmax-width: 100%To limit its width to the maximum width of the parent container, but sometimes it does not work, slowly find out the rules followed by IE to parse max-width: the width of the parent element must be fixed. The experiment found that Chrome is less compliant with the rules than IE, so this problem should not be attributed to IE compatibility issues, but I 'd like to mention it. I will share two scenarios:
(1) max-width in td
If you setmax-width: 100%In IE and Firefox, you will find that it does not work, but it works in Chrome. After query, we found that the table needs to be set.table-layout: fixedFor details about this attribute, see W3School.
(2) max-width in nested labels
The following HTML structure:
<div class="work-item"> <a href="#" class="work-link"> </a></div>
Outermost Element.work-itemFixed width is set, but setting max-width to 100% for img is invalid. Later, it was discovered that a label needs to be set again.width: 100%In this way, the inmost img label can be filled with the entire div.
HTML code:
<ul> <li><a>1</a></li> <li><a>2</a></li> <li><a>3</a></li></ul>
CSS code:
ul li{ display: inline-block;}ul li a{ display: inline-block; padding: 10px 15px;}
The distance between tags a should be 30px, but there is an overlap in IE8, with only 15px. The same problem is also mentioned here. My solution is to usefloat: leftSubstitutiondisplay: inline-blockAchieve horizontal layout.
The HTML5 attribute placeholder is not supported in IE8, but there are many js plug-ins to solve this problem, such as jquery-placeholder.
Last-childFirst-child is the content of CSS2, but last-child is not, so IE8 does not buy it. The recommended method is not to use last-child, but to set.lastClass, and then set the style, so that all are compatible.
If you want to usebackground-size: coverIt is a pity that IE8 cannot set the full screen background. However, you can use the AlphaImageLoader filter unique to IE to add the following CSS style:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)Set sizingMethod to scale.
If you place a link on the background, the link cannot be clicked. Generally, the solution is to add links or buttons.position:relativeMake it relatively floating.
CSS3 provides attribute filters that support filter effects, such as blur that supports Gaussian blur effects (similar to iOS7 effects ):
filter: blur(10px);-webkit-filter: blur(10px);-moz-filter: blur(10px);
IE8 pairfilter: blur(10px)The display effect is a small-scale fuzzy processing of HTML elements. This effect is not Gaussian blur. To support Gaussian blur, you need to set the following settings:
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
In practice, it is found that allposition: relativeWill not take effect.
Other findings are:filter: blur(10px)Invalid.filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');It is a small scope of fuzzy effect for elements. IE11 does not seem to have any sense of either method. IE10 is not tested.
Now, I have encountered IE8 + compatibility issues. I have done a little on the front-end and back-end. The advantage is that one person can develop a website independently. The disadvantage is that all aspects are not refined. If you have important supplements or better solutions, please let me know!
PS: I have recently worked on Internet Explorer 7 compatibility. For more information, see Internet Explorer 7 + compatibility.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
