2010-04-03 44 views
6

Tôi có một vấn đề lạ làm việc với HTML, CSS trong các trình duyệt khác nhau: Firefox 3.6 và trình duyệt Webkit (Chrome & Safari).chiều rộng tính với giá trị thập phân trong Firefox, nhưng không có số thập phân trong Webkit

HTML của tôi trông như thế này:

<div class="ln-letters"> 
    <a href="#" class="all">ALL</a> 
    <a href="#" class="a">A</a> 
    <a href="#" class="b">B</a> 
    <a href="#" class="c">C</a> 
</div> 

Và CSS của tôi là ...

.ln-letters a { 
    font-family: 'Lucida Grande'; 
    font-size:14px; 
    display:block; 
    float:left; 
    padding:0px 7px; 
    border-left:1px solid silver; 
    border-right:none; 
    text-decoration:none; 
} 

Như bạn có thể đoán, mỗi neo được một chiều rộng khác nhau tùy thuộc vào văn bản bên trong của nó. Ví dụ: phần tử đầu tiên có văn bản 'TẤT CẢ' sẽ lớn hơn (chiều rộng hơn) so với các phần tử khác. Bây giờ vấn đề là trong Firefox (sử dụng Firebug) tôi có thể thấy rằng chiều rộng tính toán cho phần tử đầu tiên là 26.5667px, trong khi trong Chrome (sử dụng công cụ dành cho nhà phát triển của Chrome) chiều rộng tính toán cho cùng một phần tử chính xác là 27px.

Do đó div.ln-thư kết thúc với độ rộng khác nhau ở mỗi trình duyệt và đó gây ra cho tôi một số rắc rối.

Câu hỏi là: có bất kỳ cách giải quyết để tránh Firefox giá trị tính toán số thập phân? Hoặc ngược lại: buộc Chrome tính toán giá trị thập phân?

Cảm ơn bạn trước!

Trả lời

3

Tôi nghĩ câu trả lời cho câu hỏi in đậm là "không", và nó không phải là rõ ràng với tôi những gì vấn đề bạn đang thực sự cố gắng để giải quyết. Bạn không thể mong đợi tất cả các trình duyệt trên tất cả các nền tảng đều hiển thị chính xác trang của bạn (ví dụ: vì các nền tảng khác nhau có thể sử dụng các phông chữ khác nhau để hiển thị trang của bạn). Nếu bạn muốn div có độ rộng cố định, hãy đặt nó rõ ràng trong CSS.

Một số liên kết có liên quan trên các điểm ảnh lộn xộn phân đoạn:

+0

Đó là những liên kết thật sự tốt đẹp! Cảm ơn! –

Các vấn đề liên quan