微信浏览器和PC对于某些元素的解析不同
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> web移动版本开发，必须要用到自适应。实现自适应的无非两种办法：一种flex弹性盒子模型；一种百分比，使用百分比，必然会用到box-sizing: border-box。 补充一个知识点：CSS的盒子模型有两种，一种是标准W3C盒子模型，一种是IE盒子模型。 简言之，两者的区别就是：IE盒子模型的宽度包含padding和border的值，标准盒子模型不包含。 看图说话：（PS图片是盗用的 http://www.jb51.net/css/12199.html） 然后来说说开发中碰到的两个问题： 如下图弹出框所示：左图是在PC的效果，右图是ios微信的效果。从图中可 以看出，PC中容器的高度=容器内容的高度；ios微信中容器的高度<容器内容的高度，（ios微信中容器的高度=ios微信中容器内容的高度-1）。补充：android微信中容器的高度=android微信中容器内容的高度-2。 1、微信和PC对 行内元素 解析方式不同。 分析：上图弹出框中有个span标签，HTML：<span>详细地址</span> CSS：span{line-height:45px;} PC对于span标签的解析是45px，微信对于span标签的解析是46px。 解决办法：将span标签设置为块级元素。span{display:block