inline-block导致页面元素错位

OK,刚才在编码的时候发现页面上元素错位了,使用开发者工具查看了半天,没有发现有多余的像素。
如图所示:

很好,在经过深思熟虑,加上百度谷歌后,发现问题所在,因为子元素显示方式为行内块。而且没有定义对齐方式,所以导致了元素错位。
这种属于经验问题,好在这一个坑踩过了就不会再崴到脚了。
解决办法:
父元素样式:

font-size: 0;  
-webkit-text-size-adjust:none;

子元素样式:

display:inline-block;  
vertical-align:top;  

OK,在回头刷新页面,一切完好。

发布者

iamorz

前端技术群:263240563

发表评论