PS切圖導出代碼後出現的圖片佈局散亂的解決方法——table佈局

前言：

通常來講，大部分美工PS切圖後導出的都是使用PS默認的table佈局的頁面，出現最多的異常是上傳代碼，替換圖片後，發現圖片佈局散亂，徹底不是想要的效果。輕微的是瀏覽器不兼容，只有部分瀏覽器能夠，嚴重的全部瀏覽器中都會散亂的。

避免此類問題出現的解決方法：

PS切片導出代碼使用table佈局，就要注意是否有"分隔符.jpg",若是有，上傳代碼的時候要把分隔符一起上傳替換，若是這個沒有上傳，有些瀏覽器可能對顯示沒有影響，但並非全部瀏覽器都能正常顯示的。如上圖，就是在火狐瀏覽器下顯示不正常的。

爲何會出現這個問題：

PS切片導出代碼，默認設置爲table佈局。table佈局相似於網格結構，結構比較嚴謹，若是切片不規則，就要使用合併行或列來表現圖片的不規則顯示，以下圖：

最下行會生成一行所有由"分隔符.jpg"組成（有時候最右側單元格也會有），整個表格不規則切片佈局都是由這一行分隔符.jpg爲最小單元格來支撐的。做爲整個表格最小的支撐單位，這行由分隔符組成的表格行必定要正確，若是分隔符沒有上傳，有些瀏覽器會忽略這行，那由這些最小表格單位支撐的不規則圖片排列也就沒有了標準，隨之出現了散屏。

案例解析：

異常1：

問題描述：PS切片導出代碼上傳網站後臺後，IE、谷歌瀏覽器下顯示正常，火狐瀏覽器下散屏：

問題解析：經查，ps不規則切片過程當中，會產生"分隔符.jpg"，在生成table時，對不規則的圖片進行調節，哪怕是兩個切片的兩個邊緣橫向或縱向僅僅相差1px，都會多一個1px的單元格來支撐。不一樣瀏覽器對錶格的解析會有一些不一樣，IE，谷歌瀏覽器是認可沒有src值的img標籤佔據的控件，也就能夠支撐當前單元格，但火狐瀏覽器是不認可的，若是沒有src值，這個img標籤，甚至當前單元格是不佔空間的，也就沒法起到不規則圖片排列的支持做用。

解決方法：經查，系切圖中產生1x1大小分隔符，佈局在table中最後一個tr中有img標籤沒有src屬性及屬性值，添加分隔符後顯示正常。