Dealing with Internet Explorer Compatibility: Common Issues and Practical Solutions

Preface

Internet Explorer (IE) was launched by Microsoft in 1995 to compete with Netscape Navigator and once enjoyed a dominant market share, but in recent years it has been criticized for its outdated features. Although Microsoft has stopped updating IE, many web developers still need to support users who remain on IE9 and above.

Simulating IE Version Environment

Developers on macOS, which cannot install IE directly, can use a Windows virtual machine or access a local‑network page served by Webpack (or another bundler) to test IE rendering. Some Chinese browsers provide a dual‑engine mode (fast Chrome engine and compatible IE engine) that allows switching via the developer console to simulate different IE versions, though the simulation may not be perfectly accurate.

IE‑compatible Styles

Many compatibility problems can be looked up on caniuse.com . Below are several typical issues and their fixes.

1) Fixed‑width images become distorted

Setting only width: 1200px on an <img> works in Chrome, but IE9/10 adds its own width="824" height="300" attributes based on the original image size, causing distortion when height is not explicitly set. The fix is to add height: auto; (or explicitly set both dimensions) in a class applied to the image, overriding IE’s auto‑added attributes.

2) 8‑bit color values are ignored

IE does not support 8‑digit hex colors (e.g., #FF0000EE where the last two digits represent alpha). The solution is to use the standard 6‑digit hex code or switch to rgba() for opacity, which works in IE9.

3) Mirroring images

IE9 supports CSS2D transforms but not 3D transforms such as transform: rotateY(180deg); . A workaround is to draw the image onto a <canvas> element, translate the origin to the right edge, scale the X‑axis by -1 , and then draw the image, achieving a horizontal mirror.

getRotateImg = (imgSourceId = '') => {
    const imgNode = document.getElementById(imgSourceId);
    const canvas = document.createElement('canvas');
    canvas.setAttribute('id', 'canvas');
    // set canvas size to prevent deformation
    canvas.setAttribute('width', imgNode.style.width);
    canvas.setAttribute('height', imgNode.style.height);

    const width = parseInt(imgNode.style.width);
    const height = parseInt(imgNode.style.height);

    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.src = imgNode.src;

    imgNode.parentNode.appendChild(canvas);
    img.onload = function() {
      console.log(imgNode.style.width);
      // move origin to the right edge
      ctx.translate(width, 0);
      // mirror horizontally
      ctx.scale(-1, 1);
      ctx.drawImage(img, 0, 0, width, height);
    }
}

4) Giving up Flex layout

IE9 does not support Flexbox. Equivalent layouts can be built with display: table / display: table‑cell or with display: inline‑block combined with text‑align: center and vertical‑align: middle . Example markup and CSS are provided.

<div class="wrapper-2">
  <div class="flex-2">4 equal parts</div>
  <div class="flex-2">4 equal parts</div>
  <div class="flex-2">4 equal parts</div>
  <div class="flex-2">4 equal parts</div>
</div>

.wrapper-2 {
  height: 100px;
  width: 80%;
  margin: 20px auto;
  background-color: wheat;
  display: table; /* main code */
  border-spacing: 30px; /* main code */
}
.flex-2 {
  background-color: pink;
  padding: 10px;
  text-align: center;
  border: solid 2px purple;
  display: table-cell; /* main code */
}

About CSS Hacks

CSS hacks exploit differences in how browsers parse CSS. Common techniques include conditional comments, property prefixes, and selector prefixes, usually ordered from newest to oldest (e.g., modern browsers → IE10/9/8 → IE7/6). Over‑reliance on hacks can make code messy and fragile.

IE9 Does Not Support History Routing

Single‑page applications often use the History API for clean URLs, but IE9 lacks window.history and therefore cannot use history.pushState or history.replaceState . Work‑arounds include using hash routing, converting the app to a multi‑page architecture, or employing a polyfill such as history.js .

Using ES6 in IE

@babel/polyfill

IE does not support many ES6 features (e.g., Array.from , Object.assign ). Adding @babel/polyfill via Babel transforms the code to an IE‑compatible version.

// Original code
[1, 2, 3].map(n => n + 1);

// Transpiled code
[1, 2, 3].map(function (n) {
  return n + 1;
});

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

In Node: require("babel-polyfill");

In ES6 modules: import "babel-polyfill";

In Webpack entry: module.exports = { entry: ["babel-polyfill", "./app/js"] };

var path = require("path");
module.exports = {
  entry: {
    entry: ["@babel/polyfill", "./index.js"] // add polyfill before entry file
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { babelrc: false, presets: [[require.resolve("@babel/preset-env"), { modules: false }]], cacheDirectory: true } } }
    ]
  },
  plugins: []
};

Conclusion

The author summarises the pitfalls encountered while making a project compatible with IE9+ and stresses that while compatibility is sometimes necessary, it is often more efficient to move to modern browsers and frameworks.

References

JS实现兼容IE图片向左或向右翻转 – https://blog.csdn.net/weixin_30920091/article/details/98890519

CSS Hack合集 – https://www.w3cschool.cn/lugfe/lugfe-vxfp25zq.html

Call to Action

If you found this article helpful, please click the "Read Again" button to increase its visibility, and follow the public account "政采云前端团队" for more curated content.

Recruitment

ZooTeam, the front‑end team of 政采云, is hiring. The team is based in Hangzhou, consists of over 40 front‑end engineers (average age 27), and works on material systems, engineering platforms, performance, cloud applications, data analysis, and visualization. Interested candidates can email [email protected] .