DOCTYPE
First you need to make sure you have a DOCTYPE declaration at the beginning of your HTML page. DOCTYPE tells the browser what HTML or XHTML specification to use to parse HTML documents, which affects:
The constraints on tags, attributes, and properties
have an impact on the browser's rendering mode. Different rendering modes will affect the browser's parsing of CSS codes and even JavaScript scripts.
DOCTYPE is very critical. The current best practice is to use HTML documents. the first line of type:
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 the user When browsing the web, the Chrome browser kernel is actually used), then the Chrome kernel is used for rendering. 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, they are 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 by means of meta tags. 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.
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 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 the td, you will find it doesn't work in IE and Firefox, but it does in Chrome. 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) max-width in nested tags
The following HTML structure:
<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 has a fixed width, but setting max-width to 100% for img is invalid. Later, I found out that it is necessary to set width: 100% for the a tag, so that the innermost img tag can be filled the entire div.
Nested inline-block padding elements overlap
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; }
It stands to reason that the distance between the a tags should be 30px, but in IE8 there is an overlap, only 15px. The same issue has been mentioned here and here. My workaround is to use float: left instead of display: inline-block for horizontal layout.
placeholder
The 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 as follows:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)
Setting the sizingMethod to scale 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);
IE8's display effect of 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), but not on filter:
progid:DXImageTransform .Microsoft.Blur(PixelRadius='10');//It is a blur effect for a small range of elements.