Home > Article > Web Front-end > IE8 compatibility experience summary_html/css_WEB-ITnose
IE8 compatibility experience summary_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:551062browse
Recently, I have been using the Flask Bootstrap3 framework combination for development. This article is based on this technology combination to share solutions to IE8 compatibility issues. According to my practical experience, if you write HTML/CSS in the way recommended by W3C, and then pay attention to the following points, then basically a large part of IE8 compatibility issues will be OK (IE8 here is mainly It refers to IE8. According to personal visual inspection, the rendering effect of IE9 is already very good).
Preliminary preparation
Testing IE compatibility must be done in Windows, and it must be Win7, because WinXP only supports IE8 at most, and IE9 is just fine! Most web developers do not use Windows as the development environment, either a Linux distribution or Mac OS. what to do? There are generally two methods:
If your machine is fast enough, I recommend the former method. But I used to develop on a second-hand computer, and it was really stuck when I opened the virtual machine, so I adopted the second method. If you are a Pythoner, the blog I wrote before "Building a Python Web Development Environment in Windows" may be of some use to you.
Then you need to install the browser for testing in Win7. I checked the browser share given by Baidu in the last month, and I don’t know if it is accurate:
I think the ones that need to be tested include: IE11, IETester (IE8-IE9), 360 Browser, Sogou Browser, Chrome, Firefox, and Safari for Windows. After the IETester test, it is recommended to test it again with real IE8 and IE9, just in case. Safari is best tested on Apple devices.
DOCTYPE
First you need to make sure there is a DOCTYPE declaration at the beginning of your HTML page. DOCTYPE tells the browser what kind of HTML or XHTML specification to use to parse HTML documents. It will specifically affect:
DOCTYPE is very critical. The current best practice is to type in the first line of the HTML document:
<!DOCTYPE html>
I will not elaborate on the specific explanation of DOCTYPE. You can refer to: "Correct Use of DOCTYPE", "CS002: DOCTYPE and Browser Mode Analysis".
Use meta tags to adjust the browser's rendering method
There is a concept of "Compatibility View" in IE8. When IE8 was released, it had already made a lot of changes compared to IE6/7. Improvement, 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 a "compatibility view" function, so that you can use the kernel of IE6 or IE7 to render the page 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 IE to use the latest 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 still have the menu and interface of IE, but when the user browses the web, the user actually uses is the Chrome browser kernel), then use the Chrome kernel to render. For specific instructions on this meta tag, see this excellent answer on StackOverflow.
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 certain page? The following is an official description of the new features of 360 Browser v6:
Due to the well-known situation, the mainstream domestic browsers are dual-core browsers: based on the Webkit kernel for high-speed browsing of commonly used websites. The IE-based kernel is used to be compatible with online banking and old versions of 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 URL library with a size of several hundred kilobytes, a URL library collected through long-term manual operations.
Although we strive to improve the browser's automatic verification accuracy through user feedback and code tag intelligent judgment technology. But in many cases, we still can't get it 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 and tell 360 Browser which core should be used to render this URL, then 360 Browser will immediately switch to the corresponding core after reading this tag. And apply this behavior to all URLs under this second-level domain name.
Solution 360 has told us that it recommends using Webkit through meta tags. The code is as follows:
<meta name="renderer" content="webkit">
I don’t have it. After careful investigation, I don't know if other dual-core browsers support this feature.
Media Query
Bootstrap3中使用了大量的Media Query特性，但是IE8似乎无法识别，所以需要hack一下啦！Bootstrap3的官方文档中已经针对浏览器兼容性做了比较详细的说明，推荐采用Respond.js解决此问题，具体方法参见它的文档即可。
有一个地方需要注意的是，如果对Bootstrap3 media query声明的属性（比如.container）进行覆盖，那在不支持media query的浏览器中Respond.js起作用后，会把你的覆盖样式再次覆盖。我的解决方案是在后面加上!important。
实现CSS3的某些特性
IE8不支持CSS3的很多新特性，不过我们可以使用一些比较成熟的hack方法，我采用的是CSS3 PIE，它支持的特性有这些：border-radius、box-shadow、border-image、multiple background images、linear-gradient等。
官方文档给出了2种使用方式，一种是引入.htc文件，另一种则是使用PIE.js。如果使用第一种方法（官方推荐），那么需要设置.htc文件的Content-Type为text/x-component。这个也好办，如果你是通过nginx来托管此文件，只要在Nginx的配置文件中加入一条MIME规则即可。我建议使用Flask来托管它（放在static文件夹中），这样更方便，然后只需加入下面的代码：
import mimetypes mimetypes.add_type('text/x-component', '.htc') 特别注意：请一定阅读CSS PIE给出的Know Issues。
识别HTML5元素
如果你在前端代码中使用了HTML5的新标签（nav/footer等），那么在IE中这些标签可能无法正常显示。我使用html5shiv，具体使用方法见文档。
关于max-width
还有一个在IE8中经常遇到的问题就是max-width，网页中图片的尺寸可能比较宽，我会给它设置max-width: 100%来限制其宽度最大为父容器的宽度，但是有时候却不奏效，慢慢摸索才得知IE解析max-width所遵循的规则：严格要求直接父元素的宽度是固定的。经实验发现Chrome所遵守的规则比IE松一些，所以这个问题应该不归属为IE兼容性问题，不过我还是提一下吧。分享两个我遇到的场景：
（1）td中的max-width
如果针对td中的img元素设置max-width: 100%，在IE和Firefox你会发现不奏效，而在Chrome中却是可以的。经查询发现需要给table设置table-layout: fixed，对此属性的具体解释见W3School。
（2）嵌套标签中的max-width
如下的HTML结构：
<div class="work-item"> <a href="#" class="work-link"> <img src="sample.jpg" class="work-image img-responsive"> </a> </div>
最外层元素.work-item设置了固定宽度，但是对img设置max-width为100%却无效，后来才发现需要再对a标签设置width: 100%，这样才能使最内层的img标签充满整个div。
嵌套inline-block下padding元素重叠
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; } 按理来说a标签之间的距离应该是30px，但在IE8中出现了重叠，只有15px。这里和这里也提到了同样的问题。我的解决方法是使用float: left替代display: inline-block实现水平布局。
placeholder
IE8下不支持HTML5属性placeholder，不过为解决此问题的js插件挺多的，比如：jquery-placeholder。
last-child
first-child是CSS2的内容，但是last-child就不是了，所以IE8不买账。推荐的做法不是使用last-child，而是给最后一个元素设置一个.last的class，然后对此进行样式设置，这样就全部兼容了。
background-size: cover
如果你想使用background-size: cover设置全屏背景，很遗憾IE8办不到...但可以使用IE独有的AlphaImageLoader滤镜来实现，添加一条如下的CSS样式：
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)
将sizingMethod设置为scale就OK了。
还没完，如果你在此背景之上放置了链接，那这个链接是无法点击的。一般情况下的解决办法是为链接或按钮添加position:relative使其相对浮动。
filter blur
CSS3中提供支持滤镜效果的属性filter，比如支持高斯模糊效果的blur（类似iOS7的效果）：
filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(10px);
IE8对filter: blur(10px)的显示效果是对HTML元素进行小范围的模糊处理，这个效果并不是高斯模糊，要想支持高斯模糊，需要如下设置：
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
在实践中发现一个坑就是，所有position: relative的元素都不会生效。
其他的发现是，IE9对filter: blur(10px)无效，而对filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');是针对元素小范围的模糊效果。IE11对两种写法好像都无感。IE10则没有测试。
Okay, that’s 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 one person can develop the website independently, but the disadvantage is that I am not good at all aspects. If you have any important additions or better solutions, please let me know!
PS: I have recently done some work on IE7 compatibility. For relevant experience, see IE7 Compatibility.