把一个网页链接发给朋友,结果对方那边打开显示错位、按钮乱跑、颜色都不对——两个人明明打开的是同一个网址,画面却完全不一样,这种情况并不少见。
网页背后是一套通用的代码标准,但不同浏览器(Chrome、Safari、Edge、各种手机自带浏览器)在实现这套标准时,对一些比较新、比较少见的写法支持程度不完全一样,导致同样的代码在不同浏览器里渲染出来的效果有细微差别。
即使是同一款浏览器,版本太旧的话,可能压根不认识网站用到的一些新样式写法,遇到不认识的代码,浏览器一般会直接忽略,页面就可能因此显示不完整或者错位。
做网站的人一般会用浏览器兼容性检查器提前查一下自己用到的某个 CSS 属性,主流浏览器分别支持到什么程度,提前发现「这个效果在旧版 Safari 上可能显示不出来」这类问题,而不是等用户反馈才发现。
下次遇到「同一个网页两个人看着不一样」,大概率不是网站坏了,换个新版本的浏览器打开试试,很多时候就正常了。