CSS的半星

Question

如何在IE和Chrome中獲得相同的結果（半星）。

在Chrome：http://jsfiddle.net/Auqj8/

.star { 
    font-size: x-large; 
    width: 50px; 
    display: inline-block; 
    color: gray; 
} 
.star:last-child { 
    margin-right: 0; 
} 
.star:before { 
    content: '\2605'; 
} 
.star.on { 
    color: gold; 
} 
.star.half:after { 
     content: '\2605'; 
     color: gold; 
     margin-left: -20px; 
     width: 10px; 
     position: absolute; 
     overflow: hidden; 
} 

在IE中：http://jsfiddle.net/86pqx/

謝謝。

Answer 1

這個作品在Chrome和IE

.star { 
    font-size: x-large; 
    width: 50px; 
    display: inline-block; 
    color: gray; 
} 
.star:last-child { 
    margin-right: 0; 
} 
.star:before { 
    content:'\2605'; 
} 
.star.on { 
    color: gold; 
} 
.star.half:after { 
    content:'\2605'; 
    color: gold; 
    position: absolute; 
    margin-left: -20px; 
    width: 10px; 
    overflow: hidden; 
} 

鉻：http://jsfiddle.net/Auqj8/1/

IE：http://jsfiddle.net/86pqx/3/