Bất cứ ai cũng biết tại sao điều này: sau khi CSS không hoạt động trong IE9?

Question

This submit button nên được làm tròn ở bên trái và chỉ về phía bên phải. Nó hoạt động trong các trình duyệt không có nghĩa là, nhưng trong IE9, nó không hoạt động.

Nếu tôi xem các kiểu trong công cụ nhà phát triển, nút .flat: sau khi quy tắc có mọi thứ bị gạch ngang, như thể nó bị thay thế bởi một cái gì đó. Gì?

<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> 

Answer 1

Sau khi phát xung quanh một lúc, tôi tìm thấy một bản sửa lỗi đơn giản cho IE9.

http://jsfiddle.net/thirtydot/BWC9q/10/

Tất cả bạn phải là thêm overflow: visible để .flat-button.