之前的文章說過關于行內元素垂直方向對齊的方案。感興趣的可以看我的往期文章。在上一篇文章里我們提到了 1px 內的移動問題。本文就一像素內的問題給出解決方案。

可能大家看過關于 Retina 屏幕的一像素邊框問題，注意這里是邊框寬度而不是移動元素。

什么?border 小于 1px ?

對，因為前面有人給出相關方案而且好多種方案，這里不重復描述實現原理，給大家兩個鏈接，感興趣的自己跳轉。

• Retina 屏的移動設備如何實現真正 1px 的線?
• 移動 web 點 5 像素的秘密

看完大徹大悟，佩服佩服，思路很多，回到本文重點

想一下能實現移動的方法 position(top,right,bottom,left), margin, padding, vertical-align。

上面給的只是一部分可以通過具體單位(px, em, rem 等)進行移動的方法

本著實踐的原則，上述方案都不可行，在***的 chrome 中，當小于 0.5px 時是 0，當大于等于 0.5px 時就變成 1px。

因為案例過于簡單，不做 demo ，感興趣的自己實踐，相信大家多數人試驗過了。

那么還有什么以具體單位移動的屬性呢?

解決方案

也許你早就知道有 transform 的 translate 屬性了。沒錯它就能實現 1px 內的移動!

基本語法：

transform: translate(12px, 50%); 
 
transform: translateX(2em); 
 
transform: translateY(3in);  

給出本文的 demo 代碼，

<div class="parent"> 
  <div class="child-first"></div> 
  <div class="child-second"></div> 
  <div class="child-third"></div> 
</div> 
 
<style> 
  .parent { 
    width: 310px; 
    height: 150px; 
    background-color: #666; 
  } 
 
  .parent div { 
    display: inline-block; 
  } 
 
  .child-first { 
    width: 100px; 
    height: 100px; 
 
    margin-top: .5px; 
 
    transform: translateY(.3px); 
 
    background-color: #f66; 
  } 
 
  .child-second { 
    width: 100px; 
    height: 100px; 
 
    transform: translateY(.5px); 
 
    background-color: #ff0; 
  } 
 
  .child-third { 
    width: 100px; 
    height: 100px; 
 
    transform: translateY(1px); 
 
    background-color: #06c; 
  } 
</style>  

截圖如下

這里為了更容易觀察，我們把布局換成 inline-block ，我們發現元素與元素之間存在空隙回去再看一遍代碼發現沒什么問題，那這段距離是怎么引起的呢?

是空格? 沒錯! 在使用 inline-block 的時候一定注意代碼縮進或換行帶來的不必要的麻煩(無意中添加了空格)。

修改如下

<div class="parent"> 
 
<div class="child-first"></div><div class="child-second"></div><div class="child-third"></div> 
 
</div>  

得到最終結果，如下圖

這里特地將小塊顏色做區分，瀏覽器視圖放大到***倍數，如果還是看不清的話，推薦大家親手試一試，

總結

到這里我的方法講完了，在***歡迎大家討論，方案不止一個， orange 目前只發現這一個方案，你也可以根據 js 判斷屏幕然后給出 .5 像素的偏移也是可行的，我個人認為此方法簡單一些。

歡迎關注 orange 的 個人博客 http://orangexc.xyz/