:After,: Before Issues in Internet Explorer 11

: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*/
}

CSS :before not working in IE11

The problem is using pseudo element on an input element, it does not work in i.a. IE, use a label as target instead ... and it actually shouldn't work in Chrome (or any other browser) either, as a pseudo element is not supposed to work on single tag elements.

I changed this rule to show how you could do, so you'll see it now works with FontAwesome

#dlg-audit-intake-compliance-checklist label:before {
    font-family: FontAwesome;
    content: "\f10c";
    font-size: 25px;
    text-shadow: 1px 1px 0px #ddd;
    margin-bottom: 10px !important;
}

Also note, for the input:checked to work (target its label) you can't have the input wrapped inside the label, it must be positioned before the label in the markup, like this:

<input type="radio" name="radio-group-1" id="radio-group-1-Y" value="Y" />
<label for="radio-group-1-Y"></label>

CSS before and after pseudo elements not working in Edge and IE 11

You need to change #fff0 to rgba(255, 255, 255, 0) or transparent in your CSS border-right: 10px solid transparent; and border-left: 10px solid transparent;. It's not liking the formatting of the colors.

IE and Edge don't seem to support that format.

Here's a working example:

a { text-decoration: none }.container { margin: 20px; }.font-jos {  font-family: Verdana;}.btn-ribbon {  position: relative;  display:inline-block;  padding: 13px 11px;  background-color: #b46b78;  color: #fff;  font-size: 15px;  line-height: 18px;  font-weight: 700;  letter-spacing: 0.05em;  border-radius: 0;  border: none;  margin-left: 20px;  text-transform: uppercase;}.btn-ribbon:before {    content: "";    position: absolute;    top: 0;    left: -10px;    display: block;    width: 0;    height: 0;    border-top: 22px solid #b46b78;    border-bottom: 22px solid #b46b78;    border-left: 10px solid transparent;    z-index: 1;}.btn-ribbon:after {    content: "";    position: absolute;    top: 0;    right: -10px;    display: block;    width: 0;    height: 0;    border-top: 22px solid #b46b78;    border-bottom: 22px solid #b46b78;    border-right: 10px solid transparent;    z-index: 1;}

<div class="container">  <a href="#" class="btn font-jos btn-ribbon">Read more</a></div>

Absolute Position Issue with :before pseudo element with IE 11 vs. all other browsers

Not sure if using rems is critical for your project, but removing line-height: 3.125rem; from h1:before will make it render the same in IE11.

I've heard IE11 has a bug with rems for line-height. I'll see if I can find a source for this.

---

Edit:

The bug has been filed to the IE team, but has not been fixed. See this. A user replies with a workaround using Modernizr. Unable to link directly to the workaround, but quoted below:

Posted by lmeurs on 07.04.2014 at 04:59

A workaround is to use Modernizr with the following custom test which tests the height of a pseudo element with a line height defined in rems.

// Based on https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/generatedcontent.js
Modernizr.testStyles('#modernizr{font:0/0 a}#modernizr:after{content:":)";visibility:hidden;font:7px/1 a; line-height: 5rem}', function( node ) {
    Modernizr.addTest('pseudoelementlineheightinrems', node.offsetHeight >= 10);
});

Modernizr now adds a 'pseudoelementlineheightinrems' or 'no-pseudoelementlineheightinrems' CSS class to the HTML tag which can be used to apply different styling

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

with any pure CSS hack it's not possible.

Use IE8.js http://code.google.com/p/ie7-js/

It has support for this. http://ie7-js.googlecode.com/svn/test/index.html

test page also there

after - http://ie7-js.googlecode.com/svn/test/after.html

before - http://ie7-js.googlecode.com/svn/test/before.html

Edit after 1st comment

You can just keep this js for IE6 and 7. other browser will not read it.

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->

And if you are already using jQuery in your project than you can use this plugin

jQuery Pseudo Plugin

http://jquery.lukelutman.com/plugins/pseudo/

How to fix issue with Internet Explorer 11 rendering text before applying @font-face which lead to text overflow

I fixed it by re-downloading the font kit from fonts.com. It seems they fixed the files on their side as they are different and load correctly on IE11 now.

Cheers

---

Related Topics