ie8+ Compatibility Experience Summary

This article shares the solution to the ie8+ compatibility issues I've accumulated in my project. According to my practical experience, if you write html/css in accordance with the recommended way of writing, and then the following points are concerned, then basically a large part of ie8+ compatibility issues are OK (here ie8+ mainly refers to IE8, according to personal visual inspection, ie9+ The rendering effect has been very good).

Pre-preparation

Test IE compatibility must be measured in Windows, and is win7+, because WinXP up to only support IE8,IE9! Most of the kids who do the web do not use Windows as a development environment, or Linux distributions, or Mac OS. What to do? There are generally 2 ways to do this:

• Open Windows virtual machine
• Temporarily switch the development environment to Windows

If your machine is fast enough, I recommend the previous way. But if the machine does not, the virtual machine will be very card. If you're Pythonista, I've written a blog that "building a Python web development environment in Windows" might be useful to you.

Then you need to install the browser for testing in Windows, check the Baidu statistics of the last three months browser share:

I think I can focus on these browsers: IETester (IE8-IE9), 360 browsers, Sogou browser, Chrome. IETester finished the proposal again with the real IE8, IE9 once again, just in case.

DOCTYPE

First you need to make sure that your HTML page begins with a DOCTYPE declaration. DOCTYPE tells the browser what HTML or XHTML specification to use to parse an HTML document, which affects:

• Constraint rules for marks, attributes, properties
• Affects the browser's rendering mode, and different rendering modes affect the browser's parsing of CSS code and even JavaScript scripts.

DOCTYPE is critical, and the best practice now is to type in the first line of the HTML document:

<! DOCTYPE html>

For the specific elaboration of the DOCTYPE is not launched, you can refer to: "Correct use of DOCTYPE", "Cs002:doctype and browser mode analysis."

Use META tags to adjust how your browser renders

IE8 has a "compatibility View" concept, when IE8 released, compared to IE6/7 has made a great improvement, but many of the old site is only optimized for IE6/7, using IE8 rendering will be a mess. To take care of the hard-working front-end engineers, IE8 added the Compatibility View feature so that the page can be rendered in IE8 with the IE6 or IE7 kernel. This is certainly not what we want, so we need to use META tags to force IE8 to use the latest kernel rendering page, the code is as follows:

http-equiv=content="ie=edge,chrome=1">  

IE=edgeIndicates the use of the latest IE kernel, which chrome=1 means that if you install a browser plugin for IE6/7/8 and other versions of Google Chrome Frame, the user's browser will still look like the IE menu and interface, but when users browse the Web, Actually using the chrome kernel), then use the chrome kernel to render. For specific instructions on this meta tag, see the wonderful answers on StackOverflow.

There are many dual-core browser, such as 360 browser, Sogou browser, how do they decide what kind of kernel rendering is used on a particular page? The following is an official description of the new features of the 360 browser V6:

As is known to all, the domestic mainstream browser is a dual-core browser: Based on the WebKit kernel for popular sites of high-speed browsing. IE-based kernels are used to be compatible with online banking and legacy websites. For example, 360 of the browsers, we prefer to render the mainstream through the WebKit kernel site, only a small amount of web sites through the IE kernel rendering, to ensure that the page is compatible. For a long time, our main control was a hundreds of K size Web site library, a library of URLs collected through long-term manual operations.

Although we strive to improve the automatic core accuracy of the browser through user feedback, code Tag Intelligent judgment technology. But in many cases, we still can't reach disposing right. As a result, we have added a new control: the kernel controls meta tags. As long as you add a meta tag to your website and tell the 360 browser which kernel to use to render it, then 360 browsers will immediately switch to the corresponding kernel after reading the tag. and apply this behavior to all URLs under this level two domain name.

Workaround 360 has already told us that the META tag is recommended for use with the WebKit code as follows:

Name=content="WebKit">  

I didn't do a detailed investigation, and I don't know if the other dual-core browsers support this feature.

Media Query

IE8 doesn't seem to recognize media Query, so it needs hack! It is recommended to use Respond.js to solve this problem, see its documentation for details.

Implement some features of CSS3

IE8 does not support many of the new features of CSS3, but we can use some of the more mature hack methods, I use CSS3 PIE, which supports features such as: Border-radius, Box-shadow, Border-image, multiple Background images, linear-gradient and so on.

Special Note : Be sure to read the know issues given by CSS Pie.

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 use.

About Max-width

There is a common problem in IE8 is max-width, the size of the picture in the Web page may be wide, I will set it max-width: 100% to limit its width to the maximum width of the parent container, but sometimes it does not work, Slowly groping to learn that IE analytic max-width follow the rules: Strict requirements of the direct parent element width is fixed. After the experiment found that chrome adhere to the rules than ie loose some, so this problem should not be attributed to IE compatibility problem, but I still mention it. Share the two scenarios I met:

(1) Max-width in TD

If you set up an IMG element in TD max-width: 100% , you'll find it doesn't work in IE and Firefox, but it's possible in chrome. The query found that the table needs to be set table-layout: fixed , the specific explanation of this property is shown in W3school.

(2) Max-width in nested tags

The following HTML structure:

class="Work-item">    href=class="Work-link" src= class="Work-image Img-responsive "</a></div>         

The outermost element .work-item is set to a fixed width, but the IMG setting Max-width to 100% is not valid, and later it is found necessary to set the a tag again width: 100% , so that the most inner img tag fills the entire Div.

padding elements overlap under nested inline-block

HTML code:

<ul>    <li><a>1</a></li>    <li><a>2</a> </li>    <li><a>3</a></li></ul>     

CSS code:

Li{    displayinline-block;} adisplayinline-blockpadding15px;}       

Supposedly the distance between a label should be 30px, but there is overlap in IE8, only 15px. The same problem is mentioned here and here. My workaround is to use float: left overrides to display: inline-block achieve a 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 CSS2 content, but Last-child is not, so IE8 don't buy it. The recommended practice is not to use Last-child, but to set a class for the last element .last and then style it so that it is all compatible.

Background-size:cover

If you want to use background-size: cover set full screen background, I'm sorry IE8 can't do it ... However, you can use IE's unique alphaimageloader filter to add a CSS style like this:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)

Setting the Sizingmethod to scale will be OK.

Not yet, if you put a link above this background, the link is not clickable. The general workaround is to add a link or button to position:relative make it relatively floating.

Filter Blur

The CSS3 provides properties that support filter effects, such as blur that support the Gaussian blur effect (similar to the iOS7 effect):

FilterBlur(10px);  -webkit-filterBlur(10px);  -moz-filterBlur(10px);             

IE8 to filter: blur(10px) the display effect is a small range of HTML elements of fuzzy processing, this effect is not Gaussian blur, to support Gaussian blur, the following settings are required:

The filterProgID:D ximagetransform. Microsoft.blur(pixelradius=' ten ');       

In practice, the discovery of a pit is that all position: relative elements do not take effect.

Other discoveries are that the IE9 filter: blur(10px) is not valid, whereas the pair filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=‘10‘); is a blur effect on the small range of elements.

Well, for the time being, the ie8+ compatibility problem I've met is just that. Front end and back end I do a little, the advantage is that a person can independently develop the site, the disadvantage is that all aspects are not fine. If you have a pretty important supplement, or a better solution, please tell me!

Source: http://www.hustlzp.com/post/2014/01/ie8-compatibility

ie8+ Compatibility Experience Summary