Javascript – Why does the page work in IE9’s IE7 mode, but not in IE7 itself

csshtmlinternet-explorer-7javascriptjquery

I recently went live with our new home page, after heavily testing it in each of IE9's browser and document modes (not just compatibility mode, but actual IE7 and IE8 emulation). The site works in each mode, not to mention modern browsers. However, after it launched I got an email that said the site was very broken in IE7. I went to an abandoned machine and booted up Windows XP, started IE7, and loaded the page. To my horror, the layout was indeed broken! (NOT just the slideshow!)

Most importantly, why does my page not work in IE7, even though it works in IE7 mode in IE9? And as a secondary question, what might be "wrong" with it?

Edit: I have figured out that one of my problems may be the slideshow, but adding .ie7 #slideshow {display:none !important} won't even hide the slideshow. I can't access it via CSS.

Edit 2: There is another problem that only shows up in native IE7 — the footer on that home page, and this page, is ultra-tiny text that can't be zoomed. It doesn't do this in IE9's IE7 mode (not compatibility), or in any other browser. Another example of the discrepancy.

Best Answer

I don't know about IE9's IE7-compatibility mode but the IE7-compatiblity mode built into IE8 is well known for not being a perfect copy of a real IE7. It has a large number of bugs and quirks of its own which do not appear in normal IE7.

It was bad enough that I would never have recommended anyone to actually use compatibility mode to test their site... except that you still need to cope with the occasional user who is actually using compatiblity mode on their live browser. So rather than making things easier for the developer, MS actually made things harder for us by adding yet another possible rendering engine to the mix which. Sigh.

I haven't tried IE9's compatibility modes, but if your experience is anything to go by, then they've still got the same problem. It's a shame (but not surprising) that MS didn't learn from the first time they made that blunder.

Rather than using compatibility modes to test, the best solution I know of is to use an application called IE Tester, which allows you to install and run all versions of IE alongside each other. It's still not perfect (the only way you'll get perfect, as you've already discovered, is to have a real IE7 on its own real copy of XP), but it is much much closer to the real thing than IE's own 'compatiblity' mode.

Dynamically create `<input>`s in a form and submit it

/**
 * sends a request to the specified url from a form. this will change the window location.
 * @param {string} path the path to send the post request to
 * @param {object} params the parameters to add to the url
 * @param {string} [method=post] the method to use on the form
 */

function post(path, params, method='post') {

  // The rest of this code assumes you are not using a library.
  // It can be made less verbose if you use one.
  const form = document.createElement('form');
  form.method = method;
  form.action = path;

  for (const key in params) {
    if (params.hasOwnProperty(key)) {
      const hiddenField = document.createElement('input');
      hiddenField.type = 'hidden';
      hiddenField.name = key;
      hiddenField.value = params[key];

      form.appendChild(hiddenField);
    }
  }

  document.body.appendChild(form);
  form.submit();
}

Example:

post('/contact/', {name: 'Johnny Bravo'});

EDIT: Since this has gotten upvoted so much, I'm guessing people will be copy-pasting this a lot. So I added the hasOwnProperty check to fix any inadvertent bugs.

CSS 100% height with padding/margin

I learned how to do these sort of things reading "PRO HTML and CSS Design Patterns". The display:block is the default display value for the div, but I like to make it explicit. The container has to be the right type; position attribute is fixed, relative, or absolute.

.stretchedToMargin {
  display: block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  left:0;
  right:0;
  margin-top:20px;
  margin-bottom:20px;
  margin-right:80px;
  margin-left:80px;
  background-color: green;
}

<div class="stretchedToMargin">
  Hello, world
</div>

Fiddle by Nooshu's comment

Best Answer

Related Solutions

JavaScript post request like a form submit

Dynamically create <input>s in a form and submit it

CSS 100% height with padding/margin

Related Topic

Dynamically create `<input>`s in a form and submit it