翻译50％在Chrome中无法使用宽度1px

Question

为什么翻译元素50％，使渲染不正确？

在Firefox正在工作。

笔自我解释了所有：

http://codepen.io/rdsedmundo/pen/wWNqKw

.line { 
    width: 1px; 
    height: 30px; 
    background-color: red; 
    margin-bottom: 10px; 
} 

.translate50 { 
    transform: translateX(50%); 
} 

Answer 1

显然，它是一个基于单位的问题，因为它涉及的像素和百分比，只有在奇数发生。

5分钟后，我设法使用黑客“解决”：保留1px的元素宽度和背景颜色与容器相同，并在左侧（或右侧）添加边框，还要测量1px，以及我想要的颜色线（在本例中为红色）。

.line { 
    width: 1px; 
    height: 30px; 
    background-color: red; 
    margin-bottom: 10px; 
} 

.translate50 { 
    transform: translateX(50%); 
    background-color: white; 
    border-left: 1px solid red; 
} 

Answer 2

您不能有半个像素，所以舍入涉及奇数。