Anyone know why this :after CSS isn't working in IE9?

This submit button should be rounded on the left side, and pointed on the right side. It's working in non-ie browsers, but in IE9, it is not working. If I look at the styles in the developer tools, the .flat-button:after rule has everything crossed out, as if it is superseded by something. What? ``` <button type="submit" class="flat-button">Submit</button> <style> .flat-button { float: left; position: relative; border-top-left-radius: 5px; -moz-border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px; border-bottom-left-radius: 5px; -moz-border-bottom-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; border: none; padding: 0 12px; margin: 0 3px 3px 0; outline: none; cursor: pointer; color: white; font-family:'Trebuchet MS', Arial, helvetica, Sans-Serif; font-size: 14px; font-weight: bold; font-style: italic; text-decoration: none; border-collapse: separate; height: 26px; line-height: 26px; background: #5191cd; } .flat-button:hover { background: #1c3f95; } .flat-button:after { position: absolute; content: ' '; height: 0; width: 0; left: 100%; border: 13px solid transparent; border-left-color: #5191cd; } .flat-button:hover:after { border-left-color: #1c3f95; } </style> ```