场景描述
随着信创的步伐，我们在的业务系统也在不断的适配Linux 系统；我们是B/S系统架构，前端跑在浏览器下，理论上没有什么问题或者保守点讲不会存在大的问题；
但是在测试过程中却发现了比较奇怪的问题；
打印中间件服务（通过fr3 报表工具生成相应的打印模版，fr3 报表算是比较老的打印解决方案） 返回的 HTML文件，在windows 系统下 chrome 浏览器下一切正常；打印预览的HTML能够正常显示图片；但是在 Linux 下的Chrome 下 就不显示
分析问题
测试同学报了两个Bug：
其中一个是很直白的描述，就是该linux 环境下 打印预览图片显示不了，破图。
第二个bug 就是一个 复选框 ☑️ 这个样式 不能正常显示已勾选；
排查问题
打印中间件服务这项目结项在即，虽然不是一个部门的但是也是找到我这边让协助处理，尽管我不是项目组成员，但是打印预览的控件是我这边开发的；
整个项目问题都处理完毕了，唯独剩下这两个Bug挂起结不了项；项目负责人也是各方催促希望能够fix 掉，不然项目延期对大家还是有影响的（对我指定是没任何影响的）。
本着负责人乐于助人的情节（其实是好奇），我说晚上加班的时候一起去看看具体情况是怎么样子的；
因为是夸部门协作，那指定是只能加班去排查了；
看了问题的描述，预感是不兼容；怀疑是chrome 的问题；
但是到了现场看了一下bug症状；在dom中一顿咔咔排查，发现确实是不兼容（但是很快这个怀疑就被啪啪打脸）
先排查第一个比较严重但是比较直接的bug ,图片不能正常显示；
经过查看dom树结构，发现，img标签，没有src 属性，取而代之的则是 实用 css 的 content 填充了一个base64 的 图片地址；
话说 用 css content 属性去填充 img 内容，这操作咋平时也不这样整啊；
如下图：
在windows下表现非常正常，图片正确的被渲染；
但是在linux 下却什么也不显示
第一种猜想：
由于是base64 的图片地址，在不同的环境下产生了差异，那首先怀疑的就是 base64 的图片内容是不是又问题； 经过观察：base64 图片是这样的
data:image/png;base64,xxx
我们查看一下base64 的编码格式
但是我们中间价生成的 base64 图片却是这样的：
data:;base64,xxx
缺少了中间的文件类型： image/png
那缺少文件类型声明到底能不能显示呢，答案是能；
怎么确定能的呢？ windows 下 就能正常显示，而且 单独复制 这串base64 编码 直接在
浏览器地址栏回车后，也能显示；
这实践无疑是最直接的给出了答案；
这是第一个怀疑，于是在中间件生成HTML的地方改了源代码，在 img 标签 新增了 src 属性，内容就是 base64 图片文件的编码；
就在大家都觉得问题解决的时候，编译 Delphi 源代码，跑起来后发现 生成的html 是正常的了，但是依旧不能显示；
大家顿时陷入困境了，这bug 一度要打延期解决；当天的排查就到了这。时间来到了晚上八点，大家都打算下班了！
第二种猜想：
又过了两天 时间来到了星期四，因为周三休息了一天没有处理钉钉消息，来了一看，又在说这两个bug, 只能又抱着抗拒的心态回复了对方，晚上再进行排查一次；
到了晚上 先是在 测试同学的环境对比了windows 和 linux 系统下 html 的差异； 本着上次的bug没什么实际性的进展，就从第二个bug 开始着手排查； 第二个bug是一个复选框 ☑️ 被选中的样式不是正确显示(其实不是真正的复选框 input type=checkbox 而是一个特殊的字体表现出来的 复选框样子)，
对比了 windows 和 linux 下 html 的差异 惊奇的发现： windows 下 那个 ☑️ 中的 勾。是一个svg; 而 linux 下的 是一个 img ，相同的是外面的框框是能显示的。
那么到这里很快就排除了字体文件的问题；
经过查看 linux下img 的 src 发现根本没有 src 属性，还是实用的 css content 属性 填充了图片内容；
到这里 甚感欣慰，好家伙 这两个bug 都是一样的原因；瞬间两个bug 就解决了一个；
只需要解决图片不显示的问题即可：
确定了这两个问题是同一个原因后，就去了开发的同事那边告诉了他们这个消息；
同时我们又打开了 fr3 的源码，找到了上次修改的src 属性的地方， 我们直接保留的src 部分的修改；删除了 style content 属性；
编译打包运行，问题解决！
总结问题
那这次排查问题花费2个晚上，耗时2个小时左右，成功定位并解决问题，
那么反馈出来的问题就是： img. 的 css 的conent 和 src 谁的优先级更高呢？
面对这个疑问：我们去实践一下：
来一段简单的html 代码
最后我们发现 在同时设定了 content 和 src 属性的 img 会优先css content 的内容； 这也就是我们在第一次的尝试中失败的原因；
了解到根本原因后 我们就顺理成章的移除了 style 中 content 的设置；
最终问题迎刃而解；
相关链接：
最后的最后
下面请上我们今天的主角：有请小趴菜
