明明代码是一样的,为什么本地的样式跟线上的样式不一样?简简单单的两个按钮并排放置的样式,为什么本地的两个按钮之间有间距,线上的两个按钮之间没有间距呢?
当我一行行地检查样式代码时,丝毫没有发现问题,本地的样式代码确实跟线上的样式代码一样啊!等等,letter-spacing?这不是设置单词间距么,修改一下,发现本地按钮之间的间距变小了很多,但是中间还是有一点点🤏的间距,这是什么魔法啊?
无奈只能问问其他资深的前辈们,前辈告诉我,“检查是不是inline/inline-block的dom结构里有空格/空行,且字体大小不为0”。经过另一位前辈的不懈努力,终于找到了罪魁祸首,就是本地代码有换行,因此出现了空格。线上代码经过构建,没有空格,所以letter-spacing不起作用。
原来就是烦人的空格问题,不出现问题,谁也不会注意到的小透明。既然遇到问题了,不如总结空格会产生问题的场景。
场景:
-
inline/inline-block的样式,并且字体大小不为0 -
设置了
letter-spacing