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

可能大家看過關于 Retina 屏幕的一像素邊框問題，注意這里是邊框?qū)挾榷皇且苿釉亍?/p>

什么?border 小于 1px ?

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

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

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

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

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

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

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

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

解決方案

也許你早就知道有 transform 的 translate 屬性了。沒錯它就能實現(xiàn) 1px 內(nèi)的移動!

基本語法：

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 ，我們發(fā)現(xiàn)元素與元素之間存在空隙回去再看一遍代碼發(fā)現(xiàn)沒什么問題，那這段距離是怎么引起的呢?

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

修改如下

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

得到最終結(jié)果，如下圖

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

總結(jié)

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

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