Tôi nhận thấy rằng các trình duyệt web-kit như Chrome và Safari (Windows) có xu hướng làm tròn các giá trị em cho pixel gần nhất, trong khi Firefox, IE,? Opera? có thể sử dụng giá trị pixel phụ. Đây thường không phải là một vấn đề lớn, nhưng khi tôi sử dụng em để căn chỉnh chính xác khoảng cách giữa các chữ cái hoặc sử dụng các text-shadows cho hiệu ứng nhất quán trong các độ phân giải của máy khách, điều này làm tôi nhức đầu. Hãy xem xét trong trường hợp kiểm tra sau đây.Các giá trị Web-Kit và phụ pixel, giải pháp thay thế?
Bạn sẽ thấy rằng trong FF ngay cả những chữ cái nhỏ nhất vẫn có bóng, trong khi Chrome làm tròn giá trị em xuống 0 và hai đoạn đầu tiên không có bóng.
EDIT Đây không phải là về các đơn vị. Nếu bạn thay thế 0.03em bằng 0.9, 0.8, 0.7 .. px FF sẽ hiển thị bóng nhỏ hơn và nhỏ hơn, trong khi khi Chrome xuống dưới 1px thì đột nhiên sẽ không hiển thị gì.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="bg" xml:lang="bg" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">body {font-size: 18px;} p {color: cyan; text-shadow: -0.03em -0.03em 0 rgb(0, 0, 0);}</style>
</head>
<body>
<p style="font-size:1em">No Shadow Test</p>
<p style="font-size:1.5em">No Shadow Test</p>
<p style="font-size:2em">Test</p>
<p style="font-size:2.5em">Test</p>
<p style="font-size:3em">Test</p>
<p style="font-size:3.5em">Test</p>
<p style="font-size:4em">Test</p>
<p style="font-size:4.5em">Test</p>
<p style="font-size:5em">Test</p>
</body>
</html>
Tôi sẽ không dựa vào thiết kế hoàn hảo pixel. Họ chỉ cách bạn có thể đạt được chúng là sử dụng một hình ảnh ... – Blender
Thiết kế của tôi là tất cả mọi thứ, nhưng điểm ảnh hoàn hảo. Tôi không sử dụng pixel ở bất cứ đâu. –
'em' dựa trên chiều cao của' m' với kích thước phông chữ hiện tại. Vì đó là dựa trên pixel, do đó, là 'em'. – Blender