Due to work reasons, most of the projects need to be compatible with IE9 or 8. I feel helpless, so I record some problems encountered by myself or my intern brothers
HTML part
Problem: Ie9 only supports some of the h5 tags and some of the attributes of some tags. I used to think ie8 was completely dead.
Solution:
Html5shim htmlshiv you only need to introduce this JS to be compatible with most h5 tags. You can understand that footer header and other tags that look like H5 are created by js createElenment. This way you can use h5’s new tags in IE678, just as an input habit
2. More than look at the use of meta tags in the project, in particular the meta tags can be priority definition browser version, the kernel (www.cnblogs.com/wangyang108…
Problem: Input tags placeholder do not show problems in ie9 earlier versions
Solution: There are many online solutions, roughly is to use JS to simulate, refer to my other article, placeholder toss
Problem: The input tag comes with an X problem
Solution: The CSS can be solved by Baidu
The CSS part
Matters needing attention: For layout schemes, Flex will definitely rule them out. Even IE10 and IE11 are not particularly flex friendly. For IE9, I recommend => position layout, floating float, table layout and other styles, similar to transtion animation. There are compatibility problems with cSS3 properties, so product managers must be calm when you mention it, don’t give yourself so much hope of 996
Js part
Problem: console.log problem, IE8 / IE9, often encountered by colleagues to open F12 to run
Solution: Clear console
Question: es6 syntax
Solution: especially when you don’t use build tools to engineer front-end projects, pay more attention to the standardization of JS syntax, here suggest to open their own editor’s verification rules, of course, if you use the build tool gulp, Webpack can avoid most of the problems, with some escape Babel and other global compiler new syntax for ES5 syntax
Some suggestions for daily needs compatible ie8 9 development
1.UI library selection, when developing projects, I suggest to try to use compatible frameworks made by others. In terms of UI, layUI (compatible WITH IE8 UI library), Easyui (a seriously underrated UI library, currently supports JQ, Vue, Angula, React, And the performance is very good, especially in the use of table big data rendering is quite good, using virtual scroll view, rendering massive data)
Ie9 and ie9 do not support FileReader and FormData. (We recommend using Webupload upload plugin, said to be compatible with IE6 +), and some other flash upload plugin compatibility is better than Uploadify. SWFUpload, etc., is similar to Webupload, so why not baidu?
3. Download, preferably window.open. Human browsers basically have no compatibility problems. If you are unlucky, the backend requires you to use POST to download.
4. Coding problems, some interns will write a lot of nested for loops if their logic is not good, which is not bad. Everyone will be happy if you don’t have a bug, and you really want to beat you to death when you show others a bug. It is recommended to use the new syntax of ES6 when developing, simple and clear, for fear of compatibility problems you can use the open source functional programming library lodashJS, really simple ********** of course, the advice here is for you to work with the project are all interns of the students
5. Selection of project construction technology stack, remember to confirm the minimum version requirements compatible with the browser before development, and select the appropriate front-end technology stack according to the feedback. Ie8 and below suggest using JQ + GULP workflow to build front-end projects
6. Compatibility problems, of course, a lot of, also very tired, so the key or self-test, at the moment, I found that most of the problems in the online actually local also encountered (want to kill him, don’t stop me), especially the team without professional testing, more need to be self-test function, especially the spa project, after the packaging to put nginx run it is to develop the basic operation.