I get a error message in **IE11** but not in chrome the error is: 

&gt; Script1002 Syntax error

My code is as follows

    var selectedRoles = vm.roles.filter(x =&gt; x.id === role.id);

The line and column number of the error suggest that it is the arrow function `=&gt;` that **IE11** does not like. However it works fine in **Chrome** and **Edge**

IE 11 Script1002 Array.Filter(x =&gt; ...) (Arrow functions)

IE11 has just been released (as a developer preview) and i cannot find the IE7/8/9/10-emulator in IE11 dev tools. Does anyone know where to find them now ?

Where&#39;s the IE7/8/9/10-emulator in IE11 dev tools?

In IE 11, I&#39;m getting funny results with ToLocaleDateString(). The string returned looks fine in the browser, e.g. &quot;1/28/2014 11:00:46 AM&quot;, but then if I copy and paste that value into a plain text editor, it looks like this: &quot;?1?/?28?/?2014 ?11?:?00?:?46? ?AM&quot;.

Interestingly, if I paste the text into a Microsoft product, it looks fine... The issue is that if you try to use the value programmatically to create a date, it&#39;s invalid. You can test this by just opening up a console in IE11 and creating a new date, using ToLocaleDateString() on it, and then trying to use the resulting string to create a new date in javascript or in the language of your choice (I&#39;m using ASP.NET here...).

Am I doing something wrong, or is there some other way I&#39;m supposed to be interacting with the javascript Date? How can I get rid of those funky symbols?

**Edit:**
Thanks to the comment below I was able to figure out what the unshown characters are, they&#39;re Left-To-Right marks. Depending on the editor I paste the values into and the encoding that the editor is set to use, the text will show up differently: sometimes with &quot;?&quot;, sometimes without.

ToLocaleDateString() changes in IE11

The `localStorage` object in Internet Explorer 11 (Windows 7 build) contains string representations of certain functions instead of native calls as you would expect.

This only breaks with vanilla JavaScript and sites like JSFiddle have no problem with this code but I suspect it&#39;s because there are `localStorage` polyfills in place that correct it.

Take this HTML page code for example:

    &lt;!DOCTYPE html&gt;
    &lt;script&gt;
      localStorage.setItem(&#39;test&#39;, &#39;12345&#39;);
      alert(localStorage.getItem(&#39;test&#39;));
      localStorage.clear();
    &lt;/script&gt;

This works perfectly well in all my installed browsers except for IE11. An error occurs on the first line &#39;***SCRIPT5002: Function expected***&#39;.

Taking a look at what type the `setItem` function actually is in the IE developer tools console, states that it&#39;s a string...?
    
        typeof localStorage.setItem === &#39;string&#39; // true
    
Printing out the string for `setItem` displays the following:
    
    &quot;function() {
    var result;
    callBeforeHooks(hookSite, this, arguments);
    try {
    result = func.apply(this, arguments);
    } catch (e) {
    callExceptHooks(hookSite, this, arguments, e);
    throw e;
    } finally {
    callAfterHooks(hookSite, this, arguments, result);
    }
    return result;
    }&quot;

Oddly enough, not all functions have been replaced with strings, for example, the corresponding `getItem` function is indeed a function and works as expected.

        typeof localStorage.getItem === &#39;function&#39; // true


Changing the document mode (emulation) to 10 or 9 still doesn&#39;t resolve the problem and both result in the same error. Changing the document mode to 8 gives the following error &#39;***Object doesn&#39;t support this property or method***&#39; which is expected since IE8 doesn&#39;t support `localStorage`.

Is anyone else having the same issue with IE11 on Windows 7 where the `localStorage` object seems &#39;broken/corrupt&#39;?

JavaScript localStorage object broken in IE11 on Windows 7

How can I hack or write css only for IE 11? I have a website that looks bad in IE 11.I just search here and there but didnt find any solution yet.

Is there any css selector?

How to write a CSS hack for IE 11?

When I want to detect IE I use this code:

    function getInternetExplorerVersion()
    {
      var rv = -1;
      if (navigator.appName == &#39;Microsoft Internet Explorer&#39;)
      {
        var ua = navigator.userAgent;
        var re  = new RegExp(&quot;MSIE ([0-9]{1,}[\.0-9]{0,})&quot;);
        if (re.exec(ua) != null)
          rv = parseFloat( RegExp.$1 );
      }
      return rv;
    }
    function checkVersion()
    {
      var msg = &quot;You&#39;re not using Internet Explorer.&quot;;
      var ver = getInternetExplorerVersion();
    
      if ( ver &gt; -1 )
      {
        msg = &quot;You are using IE &quot; + ver;
      }
      alert( msg );
    }

But IE11 is returning &quot;You&#39;re not using Internet Explorer&quot;. How can I detect it?



How to detect IE11?

Consider the following snippet:

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    .parent {
      display: flex;
      flex-direction: column;
      width: 400px;
      border: 1px solid red;
      align-items: center;
    }
    .child {
      border: 1px solid blue;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;parent&quot;&gt;
      &lt;div class=&quot;child&quot;&gt;
        Lorem Ipsum is simply dummy text of the printing and typesetting industry
      &lt;/div&gt;
      &lt;div class=&quot;child&quot;&gt;
        Lorem Ipsum is simply dummy text of the printing and typesetting industry
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

In Chrome, the text is wrapping as expected:

[![enter image description here][1]][1]

But, in IE11, **the text is not wrapping**:

[![enter image description here][2]][2]

Is this a known bug in IE? (if yes, a pointer will be appreciated)

Is there a known workaround?

---

[This similar question](https://stackoverflow.com/q/19138107/247243) doesn&#39;t have a definite answer and an official pointer.


  [1]: http://i.stack.imgur.com/qTX4L.png
  [2]: http://i.stack.imgur.com/FEw0L.png

Text in a flex container doesn&#39;t wrap in IE11

In IE10, the scrollbar is not always there... and when it appears it comes on as an overlay... It&#39;s a cool feature but I would like to turn it off for my specific website as it is a full screen application and my logos and menus are lost behind it.

**IE10:**

![enter image description here][1]


**CHROME:**

![enter image description here][2]

Anyone know a way of always having the scrollbar fixed in position on IE10?

overflow-y:scroll doesn&#39;t seem to work! it just puts it permanently over my website.


  [1]: http://i.stack.imgur.com/IviR8.jpg
  [2]: http://i.stack.imgur.com/lL51s.jpg

**It may be bootstrap causing the issue but which part I have no idea! see example here: http://twitter.github.io/bootstrap/**

How can I prevent the scrollbar overlaying content in IE10?

I am checking the URL to see if it contains or includes a `?` in it to control the hash pop state in the window. All other browsers aren’t having an issue, only IE.

The debugger gives me this error when I try to load in this way:

&gt; Object doesn&#39;t support property or method &#39;`includes`&#39;

I get no error when I load the page in through the popstate.

        $(document).ready(function(e) {
        	if(window.location.hash) {
        		var hash;
        		if(window.location.hash.includes(&quot;?&quot;)) {
        			alert(&#39;I have a ?&#39;);
        			hash = window.location.hash.substring(window.location.hash.indexOf(&#39;#&#39;) + 0,window.location.hash.indexOf(&#39;?&#39;));
        		}else {
        			hash = window.location.hash;
        		};
        		if (hash==&quot;#DRS&quot; || hash==&quot;#DRP&quot; || hash==&quot;#DFFI&quot; || hash==&quot;#DCI&quot; || hash==&quot;#DCP&quot; || hash==&quot;#DRP&quot; || hash==&quot;#DRMA&quot; || hash==&quot;#EICS&quot; || hash==&quot;#ORG&quot;){
        			$(hash+&#39;Content&#39;).addClass(&#39;pageOn&#39;).removeClass(&#39;pageOff&#39;);
        		}else {
        			$(&#39;#homeContent&#39;).addClass(&#39;pageOn&#39;).removeClass(&#39;pageOff&#39;);
        		};
        	} else {
        		$(&#39;#homeContent&#39;).addClass(&#39;pageOn&#39;).removeClass(&#39;pageOff&#39;);
        	}
        	$(window).on(&#39;popstate&#39;, function() {
        		var hash;
        		if(window.location.hash.includes(&quot;?&quot;)) {
        			hash = window.location.hash.substring(window.location.hash.indexOf(&#39;#&#39;) + 0,window.location.hash.indexOf(&#39;?&#39;));
        		}else {
        			hash = window.location.hash;
        		};
        		if (hash==&quot;#DRS&quot; || hash==&quot;#DRP&quot; || hash==&quot;#DFFI&quot; || hash==&quot;#DCI&quot; || hash==&quot;#DCP&quot; || hash==&quot;#DRP&quot; || hash==&quot;#DRMA&quot; || hash==&quot;#EICS&quot; || hash==&quot;#ORG&quot;){
        			$(this).navigate({target: $(hash+&#39;Content&#39;)});
        			if(window.location.hash.includes(&quot;?&quot;)) {
        			}else{
        				location.href = location.href+&#39;?&#39;;
        			}
        		}else {
        			$(this).navigate({target: $(&#39;#homeContent&#39;)});
        		};
        	});
    });

Using `window.location.hash.includes` throws “Object doesn&#39;t support property or method &#39;includes&#39;” in IE11

As a developer, I found the new Internet&amp;nbsp;Explorer version to be a complete nightmare. I turned the windows feature off, but I wasn&#39;t able to install [Internet&amp;nbsp;Explorer&amp;nbsp;10][1]. It says that it&#39;s already installed which it is not. Is there a file or a [registry][2] entry I should delete as well?

  [1]: http://en.wikipedia.org/wiki/Internet_Explorer_11#Internet_Explorer_10
  [2]: http://en.wikipedia.org/wiki/Windows_Registry


How to downgrade from Internet Explorer 11 to Internet Explorer 10?

I know IE 11 has different user agent string than all other IE

     Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko

I have tried to detect IE 11 with answer specified for this question&#39;

https://stackoverflow.com/questions/18684099/jquery-fail-to-detect-ie-11

 Thats `!!navigator.userAgent.match(/Trident\/7\./)`

But I am getting error 
`Object not found and needs to be re-evaluated.`

Then I openede developer console in IE11 and tried to access some predefined javascript objects, I am still getting same error.

I have tried

`navigator.userAgent`

`window.navigator`

`console.log(&#39;test&#39;);`

Anyone have any idea about it ?
 

Internet Explorer 11 detection

I am creating an event, so use the DOM Event constructor:

    new Event(&#39;change&#39;);

This works fine in modern browsers, however in Internet Explorer 9, 10 &amp; 11, it fails with: 

    Object doesn&#39;t support this action

How can I fix Internet Explorer (ideally via a polyfill)? If I can&#39;t, is there a workaround I can use?


Internet Explorer 9, 10 &amp; 11 Event constructor doesn&#39;t work

**UPDATE**: The old question applies only to IE11 preview; browser mode had returned in final release of IE11. But there is a catch: it is next to useless, because it does not emulate conditional comments. For example, if you use them to enable HTML5 support in legacy IEs, you will no longer be able to debug your site in IE11.

            &lt;!--[if lte IE 8]&gt;
                &lt;script src=&quot;html5shiv.js&quot;&gt;&lt;/script&gt;
            &lt;![endif]--&gt;

Read another [StackOverflow question][1] and IE [bug tracker issue][2]. Microsoft never responded to this, so it looks like they introduced this bug on purpose to steer people into buying BrowserStack subscriptions. Conditional comment emulation worked just fine in preview release.


**ORIGINAL QUESTION**:
When IE11 preview is installed on Windows 7, it comes with old-fashioned F12 tool which allows to change browser modes.
![enter image description here][3]


However, if you go to &quot;Tools&quot; menu and select &quot;F12&quot; developers tool, it gets replaced with new developer tools, and &quot;Browser mode&quot; is no longer available.
![enter image description here][4]


The only way to bring it back is to uninstall IE11 and reinstall it.

Is there easier way to switch between browser modes in IE11?


  [1]: https://stackoverflow.com/questions/19446584/why-doesnt-ie11-honour-conditional-comments-even-when-emulating-ie8-document-mo
  [2]: https://connect.microsoft.com/IE/feedback/details/806767/conditional-comments-do-not-work-when-emulating-document-modes-via-f12-developer-tools
  [3]: http://i.stack.imgur.com/lLJs0.png
  [4]: http://i.stack.imgur.com/28nFB.png

How to bring back &quot;Browser mode&quot; in IE11?

I have a simple web page with some Lipsum content that is centered on the page. The page works fine in Chrome and Firefox. If I reduce the size of the window, the content fills the window until it can&#39;t and then adds a scroll bar and fills content off screen, toward the bottom. 

However, the page doesn&#39;t center in IE11. I can get the page to center in IE by flexing the body, but if I do, then the content starts to go off screen towards the top and cuts off the top of the content.

Below are the two scenarios. See the associated Fiddles. If the problem isn&#39;t evident right away, reduce the size of the result window so that it&#39;s forced to generate a scroll bar.

Note: This application only targets the latest versions of Firefox, Chrome and IE (IE11), which all have support for the [Candidate Recommendation of Flexbox](http://www.w3.org/TR/css3-flexbox/), so feature compatibility shouldn&#39;t be an issue (in theory).


**Edit**: When using the Fullscreen API to fullscreen the outer div, all browsers correctly center using the original CSS. However, upon leaving the fullscreen mode, IE reverts back to being horizontally centered and vertically top aligned. 

**Edit**: IE11 uses non-vendor specific implementation of Flexbox. [Flexible box (&quot;Flexbox&quot;) layout updates][1]

----------


**Centers and Resizes Correctly in Chrome/FF, Does Not Center But Resizes Correctly in IE11**

Fiddle: http://jsfiddle.net/Dragonseer/3D6vw/

    html, body
    {
        height: 100%;
        width: 100%;
    }
    
    body
    {
        margin: 0;
    }
    
    .outer
    {
        min-width: 100%;
        min-height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .inner
    {
        width: 80%;
    }


----------


**Centers Correctly in Everywhere, Cuts Off Top When Sized Down**

Fiddle: http://jsfiddle.net/Dragonseer/5CxAy/

    html, body
    {
        height: 100%;
        width: 100%;
    }
    
    body
    {
        margin: 0;
        display: flex;
    }
    
    .outer
    {
        min-width: 100%;
        min-height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .inner
    {
        width: 80%;
    }


  [1]: http://msdn.microsoft.com/en-us/library/ie/dn265027%28v=vs.85%29.aspx

Flexbox Not Centering Vertically in IE

I&#39;m developing a webpage in a mixed web browser environment (Chrome/IE11). 
IE11 doesn&#39;t support CSS variables, is there a polyfill or script that exists that would allow me to use CSS variables in IE11?


IE11 - does a polyfill / script exist for CSS variables?

I&#39;m using the new [Internet&amp;nbsp;Explorer&amp;nbsp;11][1] developer tools to switch the document mode to &quot;8&quot;, but conditional comments are still ignored, that is, they are not properly parsed and behave like normal comments. So any referenced file inside the conditional comment is not requested/loaded by the browser.

Why does this happen? Is it a bug?

If you think that this is indeed a bug that needs to be fixed, please go in and say that you too can reproduce this on the Microsoft bug report that is reported for this issue:  
*[Conditional comments do not work when emulating document modes via F12 Developer Tools][2]*.

**Update:** This issue has been reported to be fixed in the mentioned bug report.

  [1]: http://en.wikipedia.org/wiki/Internet_Explorer_11#Internet_Explorer_11
  [2]: https://connect.microsoft.com/IE/feedback/details/806767/conditional-comments-do-not-work-when-emulating-document-modes-via-f12-developer-tools

Why doesn&#39;t Internet Explorer 11 honour conditional comments even when emulating Internet Explorer 8 document mode?

Do the F12 developer tools in Internet Explorer 11 also have the &quot;Always refresh from server&quot; feature of the developer tools in IE 8-10?

I see the &quot;Clear browser cache... (Ctrl + R)&quot; button on the [Network tool][1], but clicking on it appears to do nothing (the Temporary Internet Files folder still has files in it afterward). I also have the &quot;Check for newer versions of stored pages:&quot; setting set to &quot;Every time I visit the webpage&quot;, but this does not appear to always refresh external assets.

Can the cache be completely disabled in IE 11 for development?

For now I am just holding down the Ctrl key and clicking on the refresh button (per [Wikipedia&#39;s instructions to bypass the cache][2]), but this is easy to forget to do.


  [1]: http://msdn.microsoft.com/en-us/library/ie/dn255004.aspx
  [2]: http://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache#Internet_Explorer

What happened to &quot;Always refresh from server&quot; in IE11 developer tools?

I have been working on an intranet website for over 6 months
were I have been using the below html5 `doctype` and edge compatibility meta tag to force Internet Explorer to not emulate an older browser version, and this has worked ok.

    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
    	&lt;meta charset=&quot;utf-8&quot; /&gt;
    	&lt;title&gt;My title&lt;/title&gt;
    	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EDGE&quot; /&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;/body&gt;
    &lt;/html&gt;

The reason I was doing it this way is because the place I work uses a policy setting to enable compatibility view for all intranet sites, and this approach using the `EDGE` setting has worked in Internet Explorer 9.

![Intranet site compatibility view setting][1]

  [1]: http://i.stack.imgur.com/dbCvc.jpg

Over a month ago I was upgraded to Internet Explorer 11 and the site still worked as expected.

Today this stopped working as expected, I can&#39;t say for sure but I think that the policy that forces the compatibility view was not enabled in IE11 and now it is... and since this has been enabled the compatibility meta tag is no longer doing what is expected, and this site is being run in the Enterprise mode which emulates IE8.

Does anyone know how to fix this and force IE11 to be used on an intranet site when the compatibility &quot;Enterprise mode&quot; is being enforced? and can&#39;t be disabled via the browser settings?


**EDIT**

I have just tried adding a custom header in my web.config as explained in this answer
https://stackoverflow.com/a/18257208/98706

and this did not work for me I still get the below message in the developer toolbar console of 

    HTML1122: Internet Explorer is running in Enterprise Mode emulating IE8.

 It is as if version 8 is being treated as the `edge` when this intranet compatibility setting is enabled in IE11. 

This post: https://www.leapinggorilla.com/Blog/Read/1016/ie-ate-my-css---disabling-compatability-mode
explains this well, I haven&#39;t yet tried setting this header via code and our users dont have access to change their browser settings.. none of the other changes have worked as yet.

**UPDATE**

Please see my comment on this post about what the difference between Enterprise mode and compatibility mode is, because it is important.

Internet Explorer 11 disable &quot;display intranet sites in compatibility view&quot; via meta tag not working

IE10+ no longer supports browser detection tags to identify a browser.

For detecting IE10 I am using JavaScript and a capability-testing technique to detect certain `ms` prefixed styles are defined such as `msTouchAction` and `msWrapFlow`.

I want to do the same for IE11, but I am assuming that all the IE10 styles will be supported in IE11 as well.  Can anyone help me identify IE11 only styles or capabilities that I could use to tell the two apart?

**Extra Info**

* I don&#39;t want to use User Agent type detection because it&#39;s so spotty, and can be changed, as well as I think I&#39;ve read that IE11 is intentionally trying to hide the fact it&#39;s Internet Explorer.
* For an example of how the IE10 capability testing works, I used this [JsFiddle][1] (not mine) as a basis for my testing.
* Also I am expecting a lot of answers of &quot;This is a bad idea...&quot;. One of my needs for this is that IE10 claims it supports something, but it is very badly implemented, and I want to be able to differentiate between IE10 and IE11+ so I can move on with a capability-based detection method in the future.
* This test is coupled with a Modernizr test that will simply make some functionality &quot;fallback&quot; to less glamorous behavior.  We are not talking about critical functionality.

**ALSO I am already using Modernizr, but it doesn&#39;t help here.  I need help for a solution to my clearly asked question please.**


  [1]: http://jsfiddle.net/evildonald/hpwT5/

Detecting IE11 using CSS Capability/Feature Detection

My Internet Explorer 11 on my Windows 8.1 Surface tablet defaults to document mode 7, causing a lot of websites to render wrongly.

When I open the Developer tools, it states that it defaults to document mode 7 because of Intranet-compatibility settings.

However, I haven&#39;t changed these settings manually and I&#39;m browsing Internetpages!

I tried to reset the Internet Explorer settings without any luck.

Any ideas?

IE11 Document mode defaults to IE7. How to reset?

I have a simple code that runs perfectly on every browser except for the Internet Explorer 11. How can I make it work on all browsers?

[Codepen][1]

    &#39;use strict&#39;;
    
    let promise = new Promise((resolve, reject) =&gt; {
    
      setTimeout(() =&gt; {
        resolve(&quot;result&quot;);
      }, 1000);
    });
    
    promise
      .then(
        result =&gt; {
          alert(&quot;Fulfilled: &quot; + result);
        },
        error =&gt; {
          alert(&quot;Rejected: &quot; + error);
        }
      );


  [1]: http://codepen.io/Alexnotonfire/pen/bpBvqW?editors=0010

How to support promises in Internet Explorer 11?

I have a rest endpoint that returns a list on a GET call. I also have a POST endpoint to add new items and a DELETE to remove them. This works in Firefox and Chrome, and the POST and DELETE work in IE11. However, the GET in IE11 only works on initial load of the page. Refreshing returns cached data. I have seen post about this behavior in Angular 1 but nothing for Angular 2(release candidate 1).

Prevent IE11 caching GET call in Angular 2

According to this page http://kangax.github.io/compat-table/es6/, ES6 features are not implemented in IE 11. 

Does IE 11 have a plan for implementing them one day or can I forget about it?
Is there a page that explain their intent on that subject?

I read somewhere (I cannot remember where exactly) that they don&#39;t plan to fix bugs in IE 11, so my guess is that they won&#39;t bother implement new features?

Support for ES6 in Internet Explorer 11

I&#39;m using following HTML markup for my grid.

    &lt;section class=&quot;grid&quot;&gt;
        &lt;article class=&quot;grid-item width-2x height-2x&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item width-2x&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item height-2x&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item width-2x height-2x&quot;&gt;....&lt;/article&gt;
    &lt;/section&gt;

The SCSS code is something like below:

    .grid {
    	display: grid;
    	grid-template-columns: repeat( 4, 1fr );
    	grid-gap: 30px;
    	align-items: start;
    
    	.grid-item {
    		&amp;.height-2x {
    			grid-row: span 2;
    		}
    		&amp;.width-2x {
    			grid-column: span 2;
    		}
    	}
    }

Since I&#39;m using auto-prefixer in my workflow it automatically adds all relevant properties with `-ms` prefix. I can confirm it via inspect element.

Now, the issue is this code works just fine in Chrome, Firefox and Opera, but when I open this page in Microsoft Edge or in IE 11 all grid items are overlapping each other at first cell. According to [this site][1] these browsers support CSS Grid layout with `-ms` prefix. I&#39;ve created a CodePen for this scenario.

[CodePen Link][2]

Why is it not working?

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .grid {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
      -ms-grid-rows: (270px)[4];
      grid-template-rows: repeat(4, 270px);
      grid-gap: 30px;
    }

    .grid .grid-item {
      background-color: #000;
      color: #fff;
      text-align: center;
      line-height: 270px;
    }

    .grid .grid-item.height-2x {
      -ms-grid-row: span 2;
      grid-row: span 2;
    }

    .grid .grid-item.width-2x {
      -ms-grid-column: span 2;
      grid-column: span 2;
    }

&lt;!-- language: lang-html --&gt;

    &lt;section class=&quot;grid&quot;&gt;
      &lt;article class=&quot;grid-item width-2x height-2x&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item width-2x&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item height-2x&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item width-2x height-2x&quot;&gt;....&lt;/article&gt;
    &lt;/section&gt;

&lt;!-- end snippet --&gt;


  [1]: http://caniuse.com/#feat=css-grid
  [2]: https://codepen.io/imfaisal/full/rzdzqN/

CSS Grid Layout not working in IE11 even with prefixes

I&#39;m having an issue with flexbox on IE11 and while I&#39;m aware there&#39;s lots of known issue, I haven&#39;t been able to find a solution...

    &lt;div class=&quot;latest-posts&quot;&gt;
        &lt;article class=&quot;post-grid&quot;&gt;
            &lt;img src=&quot;http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg&quot; alt=&quot;&quot; /&gt;
            &lt;div class=&quot;article-content&quot;&gt;
                 &lt;h2&gt;THIS IS POST TITLE&lt;/h2&gt;
                 &lt;p&gt;BLAH&lt;/p&gt;
            &lt;/div&gt;
        &lt;/article&gt;
    &lt;/div&gt;

And the CSS...


    img {
      max-width: 100%;
    }

    .latest-posts {
      margin: 30px auto;
    }

    article.post-grid {
      width: 375px;
      float: left;
      margin: 0 25px 100px 0;
      padding-bottom: 20px;
      background-color: #fff;
      border: 1px solid #f3f3f3;
      border-radius: 2px;
      font-size: 14px;
      line-height: 26px;
      display: flex;
      flex: 1 0 auto;
      flex-direction: column;
      justify-content: flex-start;
      align-content: flex-start;
    }
    .article-content {
      padding: 20px 35px;
    }

Images are getting stretched within a flex container.

[![enter image description here][2]][2]

 Applying `align-items: flex-start` (I figured, since &quot;stretched&quot; is the default value...) or `justify-content: flex-start` doesn&#39;t seem to work.

Codepen: [example of what I mean][1]

What am I doing wrong?


  [1]: http://codepen.io/anon/pen/bpjJvg
  [2]: http://i.stack.imgur.com/6etI6.jpg

Flexbox on IE11: image stretched for no reason?

# The problem

In IE11 the image in the following code is clickable to activate/toggle the input in the label:

    &lt;label&gt;
        &lt;input type=&quot;checkbox&quot;&gt; some text
        &lt;img src=&quot;http://placeimg.com/100/100/any&quot; alt=&quot;some img&quot;&gt;
    &lt;/label&gt;

While the image in the this exactly same code but inside of a `&lt;form&gt;` is not clickable to activate/toggle the input:

    &lt;form&gt;
    &lt;label&gt;
        &lt;input type=&quot;checkbox&quot;&gt; some text
        &lt;img src=&quot;http://placeimg.com/100/100/any&quot; alt=&quot;some img&quot;&gt;
    &lt;/label&gt;
    &lt;/form&gt;

([Demo at jsfiddle][1])

![Example][2]

*Note that in the example animation above I&#39;m clicking the second image, which doesn&#39;t work, but clicking on the text works (just did that to demonstrate).*

**This was tested and reproduced on:**

- IE 11.0.9600.16428 on Windows 7 Pro SP1 x64.
- IE 11.0.9600.16438 on Windows RT 8.1 tablet.
- IE 11.0.9600.17105 on Windows 7 Pro SP1 x64.
- IE 11.0.10240.16431 on *Windows 10*

This issue does not occur in IE9, IE10, Microsoft *Edge*, and other browsers.

# Questions:

0. Can this be solved **without** JS while still using image tags?
0. If not, what other possible solutions are there?
0. *(Optional)* Why doesn&#39;t the image in the second example trigger the input element (while doing it in the first)?


  [1]: http://jsfiddle.net/GYNUS/
  [2]: http://i.imgur.com/FVpKLYb.gif

Image label for input in a form not clickable in IE11

I am using the following code to submit to a form:

    element.dispatchEvent(new Event(&quot;submit&quot;));

Inspector returns the error:

&gt; Object doesn&#39;t support this action


This works in Chrome.


The purpose of this command is to make a division call the submit event on a form when clicked.

**Jquery is not an option**


dispatchEvent in Chrome but not in IE11

I have Internet Explorer installed on my computer but needed to test compatibility mode of IE 7. After changing the document mode to IE 7, it set it as default and now I can&#39;t change it. The default is stuck on IE 7? 

![enter image description here][1]


  [1]: http://i.stack.imgur.com/eD4U8.png

How do I set Document mode default?

How to set IE11 Document mode to edge as default?

What&#39;s the least error-prone way to target just IE11 with JavaScript?

Note: This should really only be done for analytics or informing the user what browser they&#39;re using. For everything else, there&#39;s feature detection.

All Internet Explorer-11 Solutions on Gang of Coders

Total of 29 Internet Explorer-11 Solutions

IE 11 Script1002 Array.Filter(x => ...) (Arrow functions)

Where's the IE7/8/9/10-emulator in IE11 dev tools?