今天同事说了一个问题,一个web 工程里突然样式竖直方向不居中了全部失效,我帮忙看了下。结果看了一个小时也没有解决,最后猜出来的,反向推出原因,记录一下。
问题
一直运行的项目突然样式失效,竖直方向不居中了。
排查
居中的样式是靠line-height 生效的,现在样式什么的都没变。考虑是全局样式影响。
但是这个lineHeight 是行内样式,优先级最高应该 不会有东西影响。陷入纠结和尝试中。
最后对比发现,提交代码中 htmlDOCTYPE
被修改。
原因分析
新提交代码加上了这句话:
代码语言:javascript复制<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DOCTYPE 可以点击看百度百科了解。
新增这句话摒弃了font ,所以lineHeight 没有生效,所以样式没有居中。