Tại sao nút đóng của tôi rung lắc trong một số trình duyệt?

Question

Vui lòng kiểm tra bản trình diễn tại - http://jsfiddle.net/cYGzC/

Ý tưởng là khi di chuột qua dấu '(' × ') sẽ xoay quanh trung tâm sẽ cho chuyển động quay đẹp trên di chuột. Vấn đề là, để làm việc này độc đáo, trung tâm của × và trung tâm của vòng tròn phải trùng với nhau.

.close_button { 
    background-color: #3b3b3b; 
    width: 40px; 
    height: 40px; 
    border-radius: 20px; 
    box-shadow: 0 0 5px rgba(150,150,150,0.9); 
    color: #fff; 
    font-size: 40px; 
    line-height: 40px; 
    text-align: center; 
    transition-duration: 2s; 
    -webkit-transition-duration: 2s; 
    -moz-transition-duration: 2s; 
    -o-transition-duration: 2s; 
    cursor: pointer; 
} 

Thủ thuật CSS ở trên dường như thực hiện công việc trong nhiều trình duyệt ngoại trừ Chrome trong Windows. (Mac Chrome dường như hoạt động tốt.)

Answer 1

Câu trả lời ngắn gọn là sử dụng một hình ảnh cho chéo của bạn. Như Taras nói, không có gì đảm bảo rằng phông chữ sẽ được hiển thị chính xác như nhau trong mọi trình duyệt.

Answer 2

Có vẻ như font-family Nó là một phần của vấn đề. Nếu bạn thực hiện font-family:Arial, Helvetica, sans-serif; nó dường như làm việc tốt hơn trong firefox

http://jsfiddle.net/cYGzC/1/