Web-Kit和子像素值，解决方法？ [英] Web-Kit and sub-pixel values, workaround?
问题描述
我注意到Chrome和Safari（Windows）之类的Web-kit浏览器往往会将em值舍入为最接近的像素，而Firefox，IE？歌剧？可以使用子像素值。这通常不是一个大问题，但是当我使用em来精确对齐字母间距或使用文本阴影在不同的客户端解决方案一致的效果，这导致我头痛。看下面的测试用例。
I noticed that Web-kit browsers like Chrome and Safari (Windows) tend to round em values to nearest pixel, while Firefox, IE, ? Opera ? can use sub-pixel values. This is normally not a big issue, but when I use em to precisely align letter spacing or use text-shadows for consistent effect in different client resolutions this causes me headache. Take a look in the following test case.
你会看到在FF中，即使最小的字母仍然有一个阴影，而Chrome向下舍入em值为零，前两段没有阴影。
You will see that in FF even the smallest letters still have a shadow, while Chrome rounds down the em value to zero and the first two paragraphs have no shadow.
EDIT 这不是关于单位。如果您替换0.03em与0.9，0.8，0.7 .. px FF将显示越来越小的阴影，而当Chrome低于1px时，它突然不显示任何东西。
EDIT This is not about the units. If you replace 0.03em with 0.9, 0.8, 0.7 .. px FF will display smaller and smaller shadow, while when Chrome goes below 1px it suddenly displays nothing.
<!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>
推荐答案
问题是chrome不会定位文本以亚像素为增量的文字阴影，因此舍入为最接近的像素。
The problem is that chrome won't position text and text shadows at sub-pixel increments, so it rounds to the nearest pixel.
您可以使用 letter-spacing 看到相同的效果，其中firefox将允许像素中的非整数值， chrome将舍入最接近的像素。
You can see the same effect with letter-spacing where firefox will allow non-integer values in pixels, while chrome will round the closest pixel.
这篇关于Web-Kit和子像素值，解决方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
