1. One “Standard,” Two Boxes#

The most famous disagreement in front-end history is known as the Box Model War.

In IE6’s Quirks Mode, a box with width: 100px and padding: 10px has a total width of exactly 100px; while in W3C standards mode, the content is 100px wide, and after adding padding and border, it actually occupies 120px.

1
.box {
2
  width: 100px;
3
  padding: 10px;
4
  border: 1px solid;
5
  /* Standard mode: actually occupies 122px (content-box) */
6
  /* IE quirks mode: actually occupies 100px (border-box) */
7
}

Back then, everyone cursed IE for being “non-standard.” But over a decade later, the CSS Working Group quietly added a property—box-sizing: border-box, which is turning IE’s algorithm from back then into the standard. After all that back and forth, it turns out IE was the one who “implemented the requirement ahead of time.”

2. Those APIs That Only IE Had#

IE’s unique tricks can be listed off the top of my head:

1
/* 1. Transparency: the whole world uses opacity, only IE uses filters */
2
.box {
3
  opacity: 0.5;
4
  filter: alpha(opacity=50); /* IE6/7 only */
5
}

Even more absurd than filters was CSS expressions—allowing you to write JavaScript inside stylesheets:

1
/* IE5~IE7: make element width change with the window */
2
.sidebar {
3
  width: expression(document.body.clientWidth < 600 ? "600px" : "auto");
4
}

This thing would re-evaluate on every repaint, causing performance to collapse outright, and conveniently opened a backdoor for XSS. Later, Microsoft themselves disabled it.

As for the origin of AJAX—XMLHttpRequest, the way to write it in IE was like this:

1
var xhr = new ActiveXObject("Microsoft.XMLHTTP"); // IE-specific

Yes, a network request object that actually had to be created through an ActiveX control.

3. Conditional Comments: The “Secret Code” Microsoft Handed Out Themselves#

IE provided an HTML comment syntax that only it could recognize:

1
<!--[if lt IE 9]>
2
  <script src="/js/html5shiv.js"></script>
3
  <link rel="stylesheet" href="/css/ie8.css" />
4
<![endif]-->

Standard browsers would ignore it as a comment, while IE would execute the content inside. So in those years, almost every <head> contained a piece of this “secret code,” accompanied by CSS hacks like _height: 100px and *display: inline that only took effect on specific IE versions. Compatibility went from being a technique to being a form of witchcraft.

4. The document.all That Pretends It Doesn’t Exist#

IE’s most enduring “legacy” is hidden in the HTML standard. Even today, if you open the console and type:

1
typeof document.all // "undefined"
2
document.all == undefined // true

document.all clearly exists, yet pretends it doesn’t—because back then, code commonly used if (document.all) to detect IE, and the standards committee, in order to prevent these old codebases from running into the wrong logic branch, defined this object itself as “an existence disguised as undefined.” One line of specification erected a monument for a piece of history.

5. Conclusion#

Many of IE’s “quirks” actually stem from its leading position in the browser wars: it implemented many things before the standards existed, so the standards had to accommodate it in reverse. But for those developers back then who were debugging hasLayout while cursing up a storm, this “foresight” really wasn’t very convincing.

The good news is: today’s Edge is just Chromium with a new skin, and Safari is dutifully taking up the mantle of “the new IE.” The old king is dead, long live the new king.

References

• Internet Explorer 11 desktop application end of support announcement — Microsoft’s official 2022 retirement notice
• The bizarre definition of document.all in the HTML standard — A special case born in the spec for IE compatibility
• MDN: box-sizing — The Box Model War and the origin of border-box
• IE Conditional Comments official documentation — The original explanation of that “secret code”