[Solved] content outside of button tag not work on IE

[hoangnm]

i tried to make a button with small triangle outsite, look like this:

http://cdpn.io/Dgpfu

it work fine on FF, Chrome, but on IE it didn’t work, triangle dont display. i’m using IE10 on win8, i changed Browser Mode to IE9, IE8, IE7 it’s still not work

<button>
  <i></i>
  Send
</button>

button{
  background: red;
  border:none;
  padding: 10px 20px;
  color:#FFFFFF;
  position: relative;
}
button i{
  position: absolute;
  top: 10px;
  right: -20px; 
  width:0;
  height: 0;
  border: solid 10px;

border-color: transparent transparent transparent red;
}

Help me, pls. Thanks

[Paulie_D]

That’s not the usual way to make a triangle…it’s usually done by using a pseudo-element like :before or :after

Obviously it works in non-IE…I wasn’t sure why it doesn’t in IE.

On a hunch, I tried setting the overflow to visible and it seemed to do the trick.

http://codepen.io/Paulie-D/pen/bglrF

[hoangnm]

thank you so much, overflow: visible it worked fine.
:before and:after work with IE8+, but i need support IE7.
Thank you again!

[Author]

Posts