Like everyone else, I need to test my code on Internet Explorer 6 and Internet Explorer 7. Now Internet Explorer 8 has some great tools for developer, which I&#39;d like to use. I&#39;d also like to start testing my code with Internet Explorer 8, as it will soon be released.

The question is: how to run Internet Explorer 6, Internet Explorer 7, and Internet Explorer 8 on the same machine. So far with Internet Explorer 6 and Internet Explorer 7 I&#39;ve been using [Multiple IE][1]. But people have reported (see comments on the page linked in the previous sentence) issue with Internet Explorer 6 after installing Internet Explorer 8. Those errors are related to focus in form fields. Running Internet Explorer 7 wouldn&#39;t matter so much as Internet Explorer 8 can use the Internet Explorer 7 rendering engine, but we still need Internet Explorer 6.

How to run Internet Explorer 6, Internet Explorer 7, and Internet Explorer 8 on the same machine?

  [1]: http://tredosoft.com/Multiple_IE?page=6


Running Internet Explorer 6, Internet Explorer 7, and Internet Explorer 8 on the same machine

I have an absolutely positioned `div` containing several children, one of which is a relatively positioned `div`. When I use a `percentage-based width` on the child `div`, it collapses to `0 width` on IE7, but not on Firefox or Safari.

If I use `pixel width`, it works. If the parent is relatively positioned, the percentage width on the child works.

 1. Is there something I&#39;m missing here?
 2. Is there an easy fix for this besides the `pixel-based width` on the child?
 3. Is there an area of the CSS specification that covers this?

Why did the width collapse in the percentage width child element in an absolutely positioned parent on Internet Explorer 7?

I&#39;ve isolated a little test case of IE7&#39;s `z-index` bug, but don&#39;t know how to fix it. 
I have been playing with `z-index` all day long.

What is wrong with `z-index` in IE7?

Test CSS:

&lt;!-- language: lang-css --&gt;

    input {
    	border: 1px solid #000;
    }

    div {
    	border: 1px solid #00f;
    }

    ul {
    	border: 1px solid #f00;
    	background-color: #f00;
    	list-style-type: none;
    	margin: 0;
    	padding-left: 0;
    	z-index: 1000;
    }

    li {
    	color: #fff;
    	list-style-type: none;
    	padding-left: 0;
    	margin-left: 0;
    }

    span.envelope {
    	position: relative;
    }

    span.envelope ul {
    	position: absolute;
    	top: 20px;
    	left: 0;
    	width: 150px;
    }

Test HTML:

&lt;!-- language: lang-html --&gt;

    &lt;form&gt;
      &lt;label&gt;Input #1:&lt;/label&gt;
      &lt;span id=&quot;envelope-1&quot; class=&quot;envelope&quot;&gt;
        &lt;input name=&quot;my-input-1&quot; id=&quot;my-input-1&quot; /&gt;
          &lt;ul&gt;
            &lt;li&gt;item&lt;/li&gt;
            &lt;li&gt;item&lt;/li&gt;
            &lt;li&gt;item&lt;/li&gt;
            &lt;li&gt;item&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/span&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;label&gt;Input #2:&lt;/label&gt;
      &lt;span id=&quot;envelope-2&quot; class=&quot;envelope&quot;&gt;
        &lt;input name=&quot;my-input-2&quot; id=&quot;my-input-2&quot; /&gt;
      &lt;/span&gt;
    &lt;/form&gt;

IE7 Z-Index Layering Issues

I need to debug JavaScript in Internet Explorer 7.

Unfortunately, its default debugger doesn&#39;t provide me with much information. It tells me the page that the error showed up on (not the specific script) and gives me a line number.  I don&#39;t know if that is related to my problem.

It&#39;d be nice if it could narrow down the error to a line number on a specific script (like Firebug can).

Is there an addon to debug JavaScript in IE7 like Firebug does in Firefox?

Thank you!

### See also:
[Does IE7 have a “developer mode” or plugin like Firefox/Chrome/Safari?][1]


  [1]: https://stackoverflow.com/questions/56615/does-ie7-have-a-developer-mode-or-plugin-like-firefoxchromesafari

Debugging JavaScript in IE7

Can someone please help me get my head around this bug? With Firefox its working fine but with Internet Explorer 7 its not. It seems not to understand the `display: inline-block;`.


**html:**

    &lt;div class=&quot;frame-header&quot;&gt;
    	&lt;h2&gt;...&lt;/h2&gt;
    &lt;/div&gt;

**css:**

    .frame-header {
    	height:25px;
    	display:inline-block;	
    }



IE7 does not understand display: inline-block

Since IE7 and IE8 don&#39;t support the double-colon notation for pseudo-elements (e.g. `::after` or `::first-letter`), and since modern browsers support the single-colon notation (e.g. `:after`) for backwards compatibility, should I use solely the single-colon notation and when IE8&#39;s market share drops to a negligible level go back and find/replace in my code base?  Or should I include both:

    .foo:after,
    .foo::after { /*styles*/ }

Using double alone seems silly if I care about IE8 users (the poor dears).

Should I use single or double colon notation for pseudo-elements?

I&#39;m trying to &quot;force&quot; Safari or IE7 to open a new page _using a new tab_.

Programmatically I mean something like:

    window.open(&#39;page.html&#39;,&#39;newtaborsomething&#39;);

Programmatically open new pages on Tabs

Sorry for my inpatience but after weeks staying up late and just having put my web online, I just don&#39;t have any left energy to debug... I just can&#39;t Google how to implement JSON on IE6 &amp; IE7... I&#39;m using

    JSON.stringify(...)

From what I understand JSON is not built in on IE6-7 and has to be dynamically added in in-line code... how do you do that?

I already have jQuery - is it my correct understanding that their JSON engine relies on the browser native one?

Then some comment on invalid JSON code that makes IE6-7 fail, but I thought it wasn&#39;t native in IE6-7?


Anyone?

JSON on IE6 (IE7)

I have this CSS code with an `inline-block`. Can anyone tell me how to make it work in Internet Explorer 6 and 7. Any ideas? Maybe I&#39;m doing something wrong? Thank you!

    #signup {
       color:#FFF;
       border-bottom:solid 1px #444;
       text-transform:uppercase;
       text-align:center;
    }
    #signup #left {
       display: inline-block
    }
    #signup #right {
       background-image:url(images/signup.jpg);
       border-left: solid 1px #000;
       border-right: solid 1px #000;
       display: inline-block; 
       padding:1% 2%
       width:16%;
    }
    #signup #right a { font-size:100%; font-weight:bold } 
    #signup #right p { font-size:90%; font-weight:bold }
    #signup a:hover  { color:#FFF; text-decoration:underline }

Inline block doesn&#39;t work in internet explorer 7, 6

I have been stuck on this one for a while - I couldn&#39;t figure out why a website renders differently in two identical versions of Internet Explorer. Half an hour ago I came across a compatibility mode button in IE which made me really angry. 

Disabling compatibility mode has fixed my problem.

Is there a way to disable it programmatically, i.e. from a web page?

**Edit:**

Just came across this blog https://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx 

I&#39;ll post an example code after reading the article

How can I programmatically disable IE compatibility mode?

(Tried to find simular questions / duplicates, failed)

I develop on a mac. I love my mac. I develop using Chrome, Firefox, and Safari. I love them all for different reasons.

But I have to develop for Internet Explorer users as well. 

I know, I am not unique here.

I enjoy using the webkit inspector / firebug to mess with CSS. One of the biggest issues I&#39;ve found when testing ie6-8 is the inability to edit CSS on the fly. The back and forth to a VM or an actual pc, trying something in CSS, saving, reloading in IE, failing, and repeating, leads to a slow development process.

So, on to my actual question.

Is there any sort of online emulator/simulator for various internet explorer versions? Something that somehow renders the page using the ie engine, but still allows me to use my inspector? 

Is this even possible?

Online Internet Explorer Simulators

I am coding a Frontend which works well in IE7 Standards Mode and IE8 Standards Mode.

When I start up Internet Explorer and load the page both IE7 and IE8 go to Quirks Mode directly. How can I force both IE7 and IE8 to always load the page in Standards Mode?

I have no special meta tags added so far.

Thanks for helping me out

Edit: My doctype and head looks as follows at the moment:

    &lt;!DOCTYPE html&gt; 
    &lt;html lang=&quot;de&quot;&gt; 
    &lt;head&gt; 
    	&lt;title&gt;...&lt;/title&gt; 
    	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
    	&lt;meta charset=&quot;utf-8&quot; /&gt;
    	&lt;script src=&quot;js/html5.js&quot;&gt;&lt;/script&gt; 
    
    	(...)
    &lt;/head&gt;

How do I force Internet Explorer to render in Standards Mode and NOT in Quirks?

I started using a diagnostic css stylesheet, e.g.
[http://snipplr.com/view/6770/css-diagnostics--highlight-deprecated-html-with-css--more/][1]

One of the suggested rules highlights input tags with the type submit, with the recommendation to use `&lt;button&gt;` as a more semantic solution.  What are the advantages or disadvantages of `&lt;button&gt;` with type submit (such as with browser compatibility) that you have run across?

Just to be clear, I understand the spec of `&lt;button&gt;`, it has a defined start and end, it can contain various elements, whereas input is a singlet and can&#39;t contain stuff.  What I want to know essentially is whether it&#39;s broken or not. I&#39;d like to know how usable button is at the current time.  The first answer below does seem to imply that it is broken for uses except outside of forms, unfortunately.

**Edit for 2015**

The landscape has changed!  I have 6 more years experience of dealing with button now, and browsers have somewhat moved on from IE6 and IE7.  So I&#39;ll add an answer that details what I found out and what I suggest.

  [1]: http://snipplr.com/view/6770/css-diagnostics--highlight-deprecated-html-with-css--more/

IE6 + IE7 CSS problem with overflow: hidden; - position: relative; combo

Works fine in IE8, IE9, and latest Chrome and Firefox, but can&#39;t seem to get it to show up in IE7. This is even with the most basic example of using the script.

Anyone had similar issues? Thanks!

Google +1 Button not working in IE7?

Is there a way to force IE8 into IE7 compatibility mode using .NET or Javascript?

Force IE8 Into IE7 Compatiblity Mode

I am using `:after` and `:before` CSS pseudo elements and it is working fine in **Internet Explorer 8**, and all modern browsers but it is not working fine in **Internet Explorer 7**. Are there known hacks to work around this in **Internet Explorer 7**?

:after and :before CSS pseudo elements hack for Internet Explorer 7

I&#39;m using Bootstrap 2.3.1 http://twitter.github.io/bootstrap/index.html


So I&#39;m using their &#39;dropdown-menu&#39; class to create some simple quick use dropdown menus, but for some reason on **IE7** they are appearing behind text and other elements on my site.

**Test Link:** http://leongaban.com/_projects/defakto/CDS/

I added z-index to my CSS, but still doesn&#39;t seem to do anything, please help!

    .header .header-nav ul#nav-account ul.dropdown-menu,
    .header .header-nav ul#nav-library ul.dropdown-menu {
	    z-index: 10000;
    }

IE9, Chrome, FF and other modern no headache browsers:
![enter image description here][1]

----------

IE7 &gt;:(                                              
![enter image description here][2]

HTML

    &lt;div class=&quot;header-nav&quot;&gt;

	&lt;ul id=&quot;nav-account&quot; role=&quot;navigation&quot; class=&quot;pull-right&quot;&gt;

		&lt;!-- Language Dropdown Button --&gt;
		&lt;li id=&quot;language-btn&quot;&gt;
			&lt;a href=&quot;#&quot; id=&quot;drop1&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;English&lt;/a&gt;
			&lt;img src=&quot;img/header-small-down-arrow.png&quot; alt=&quot;grey triangle&quot;/&gt;&lt;!-- &lt;span class=&quot;grey_triangle&quot;&gt;&lt;/span&gt;--&gt;

			&lt;!-- Language Dropdown Menu--&gt;
			&lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot; aria-labelledby=&quot;drop1&quot;&gt;
                &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;English&lt;/a&gt;&lt;/li&gt;
                &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Spanish&lt;/a&gt;&lt;/li&gt;
                &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;German&lt;/a&gt;&lt;/li&gt;
                &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Japanese&lt;/a&gt;&lt;/li&gt;
                &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Chinese&lt;/a&gt;&lt;/li&gt;
          	&lt;/ul&gt;
		&lt;/li&gt;

		&lt;!-- User Dropdown Button --&gt;
		&lt;li id=&quot;account-btn&quot;&gt;
			&lt;a href=&quot;#&quot; id=&quot;drop2&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;Logout&lt;/a&gt;
			&lt;img src=&quot;img/header-small-down-arrow.png&quot; alt=&quot;grey triangle&quot;/&gt;
			&lt;!-- &lt;span class=&quot;grey_triangle&quot;&gt;&lt;/span&gt; --&gt;

			&lt;!-- User Dropdown Menu--&gt;
			&lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot; aria-labelledby=&quot;drop2&quot;&gt;
                &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;http://google.com&quot;&gt;Logout&lt;/a&gt;&lt;/li&gt;
                &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#anotherAction&quot;&gt;Account&lt;/a&gt;&lt;/li&gt;
          	&lt;/ul&gt;
		&lt;/li&gt;
	&lt;/ul&gt;





  [1]: http://i.stack.imgur.com/pH6DS.gif
  [2]: http://i.stack.imgur.com/AzPvc.gif

Bootstrap dropdowns menus appearing behind other elements - IE7

When uploading a file (jpeg) via a form in IE7 I am seeing a mime-type of &quot;image/pjpeg&quot; instead of &quot;image/jpeg&quot; (as I see in Firefox or similar).  It&#39;s easy enough to work around this problem, but I&#39;m just wondering why IE7 is behaving differently in this case?

Why does IE7 specify a mime-type of image/pjpeg rather than just image/jpeg?

I recently came across an IE7 only bug that I thought I&#39;d share so when I come to this site 6 months from now to figure out the same thing, I&#39;ll have it on hand. 

I believe the easiest way to recreate this bug would be the following html in a page with a declared doctype (it works correctly in &quot;quirks mode&quot; / no-doctype):

    &lt;div style=&quot;overflow: auto; height: 150px;&quot;&gt;
        &lt;div style=&quot;position: relative;&quot;&gt;[...]&lt;/div&gt;
    &lt;/div&gt;

In IE7, the outer div is a fixed size and the inner div is relatively positioned and contains more content (assuming the inner div causes an overflow). In all other browsers, this seems to work as expected.

Screenshot:
![bug screenshot][1]
 
  [1]: http://i.stack.imgur.com/98kiZ.png

IE7 CSS Scrolling Div Bug

&gt; **Possible Duplicate:**  
&gt; [Running Internet Explorer 6, Internet Explorer 7, and Internet Explorer 8 on the same machine](https://stackoverflow.com/questions/574463/running-internet-explorer-6-internet-explorer-7-and-internet-explorer-8-on-the)  

&lt;!-- End of automatically inserted text --&gt;

I need recommendations on a good Internet Explorer standalone for Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8.

I tried using [Tredosoft&#39;s Internet Explorer 7 standalone][1] and MultiIE for Internet Explorer 6, but select elements were being blocked as pop-ups, even when the pop-up blocker was turned off, in all Internet Explorer browsers (6,7,8).

I also tried the Internet Explorer Collection from Edskes, but Internet Explorer 6 and Internet Explorer 7 refuse to let me type in a text box.

If someone can provide me with either a solution or an alternative that&#39;d be brilliant.

Also, I&#39;m using [VMware Fusion][2] to run Windows XP on my Mac.

  [1]: http://tredosoft.com/IE7_standalone
  [2]: http://en.wikipedia.org/wiki/VMware_Fusion


All Internet Explorer-7 Solutions on Gang of Coders

Total of 21 Internet Explorer-7 Solutions