How to Work Around Ie Not Supporting: After

How do you work around IE not supporting :after?

1. Use the IE7.js hack to add after pseudoelement support.
2. Use conditional comments to add to the markup to simulate that effect or to remove some of the existing style to make it easier to read without dividers -- eg, let the list items stack in a stylesheet in a conditional comment
3. Allow IE6 to degrade gracefully by rearranging the style so this doesn't happen, even if it looks different in other browsers.

:after, :before issues in internet explorer 11

You have to modified your CSS a little bit to align the drop arrow in all browsers including IE11. Please use this CSS.

#nav li{
  display: inline-block;
  position: relative; /*Added Line*/
}

#nav ul li.active:after {
border-left: 20px solid transparent;
border-right: 20px solid transparent;
content: "";
border-top: 13px solid rgba(2,155,223,0.9);
position: absolute;
bottom: -10px; /*change from -13 to 10px*/
width: 0px;
/*margin-left: -20px;*/  /*REmoved Line*/
  left: 20px;/*Added Line*/
}

::after on :hover does not work in IE

This seems to be a bug in IE10 (even when it emulates other versions).

I have, though, found a workaround. If you add an empty CSS rule for #d2:hover, it will then listen to #d2:hover::after as shown in this JSFiddle.

main element not working in Internet Explorer 11

The HTML5 main element is not supported by Internet Explorer (see browser support data).

You'll need to define main as a block-level element for width to work.

Make this adjustment:

main {
  display: block;  /* new */
  width: 200px;
}

Because the main element is not recognized by Internet Explorer – meaning it's not defined in IE's default style sheet – it uses CSS initial values (per the spec).

The initial value of the display property is inline.

The width property is ignored by inline elements. From the spec:

10.3.1 Inline, non-replaced
elements

The width property does not apply.

By defining the main element as a block-level element in author styles, the width property will work.

More details:

• Default settings of unrecognized HTML elements
• Default style sheet for HTML 4
• main property browser compatibility
• display property definition and initial value

Why does Internet Explorer not send HTTP post body on Ajax call after failure?

There does not seem to be a clear answer to this question, so I will provide my empirical data as a substitute and provide some ways to work around it. Maybe some MS insider will one day shed some light on this...

1. If HTTP Keep-Alive is disabled on the server, this issue goes away. In other words, your HTTP 1.1 server will respond to every Ajax request with a Connection: Close line in the response. This keeps IE happy but causes every Ajax request to open a new connection. This can have a significant performance impact, especially on high latency networks.

2. The issue is triggered easily if Ajax requests are made in rapid succession. For example, we make Ajax requests every 100ms and then the network status changes, the error is easy to reproduce. Although most applications probably do not make such requests, you might well have a couple of server calls happening right after each other which could lead to this problem. Less chatty keeps IE happy.

3. It happens even without NTLM authentication.

4. It happens when your HTTP keep-alive timeout on the server is shorter than the default (which defaults to 60 seconds on Windows). Details provided in link in question.

5. It does not happen with Chrome or Firefox. FF sends one packet so seems to avoid this issue altogether.

6. It happens in IE 6, 7, 8. Could not reproduce with IE 9 beta.

Graceful way to tell users of IE7 and below to go away?

Use an IE conditional statement (e.g. <![if lte IE 7]>Upgrade your browser<![endif]>) and remove the content with jQuery.

Internet Explorer 11: table.rows not working

Wow guys, believe it or not, it was the CSS file which was causing the problem.

table.TABLE_V_SCROLL>tbody, div.TABLE_V_SCROLL>div.tbody {

    display: block;
}

and

table.TABLE_V_SCROLL>thead, div.TABLE_V_SCROLL>div.thead {

    display: table;
}

It seems that internet explorer 11 doesn't appreciate that we set the display property for tables.

The problem now is that those lines are required for my code to work on Google Chrome -_-...

External CSS not working in IE11

I know this is an old problem, but I ran into it trying to solve the same problem with my webserver.

IE/Edge was not honouring the css generated by my (custom-built) webserver. The problem was when my webserver returned the css it didn't mark the mime-type as css and IE/Edge reported (hidden in its console output):

SEC7113: CSS was ignored due to mime type mismatch.

Fix was simply to mark the HTML response mime-type as "text/css" and all was OK.
Note that all the other browsers (Firefox, Chrome, Safari, Android) I tried had no problem with the incorrect mime-type, they just got on with it.

---

Related Topics