程序员玛丽的星海方舟

各种问题的发现、解决与感想(2)

目录:


CSS opacity属性设置百分比会导致生产环境问题

在某个项目的测试阶段中,测试人员反馈某个元素没有显示,但是本地开发环境一切正常。在浏览器检查时发现,该元素的opacity属性值被设置为1%,故几乎不可见,但实际代码中设置为70%.

经过网络查询发现,原来别人也有出现同样的问题,即当opacity属性设置为百分比的时候,打包工具无法正确处理,就会变成1%. 如果使用0.7这样的小数值,便可以正常处理。

实际上,opacity的值的标准写法就是小数(见MDN Web Doc),但工程中往往写百分比形式也可以正常使用(且符合直觉,通常不透明度的概念经常以百分比表示),然而使用一些打包工具转移到生产环境的时候,就会导致数值错误的问题。希望读者都能够知道这件事情,不要犯类似的错误。


HTML文件引用在服务器上的路径问题

有时我们不使用node进行开发和打包,而是直接使用HTML, CSS, JS文件开发和打包。

在开发阶段,我们在HTML代码中引用文件时通常使用文件的相对路径,如"image/xxx.png", "css/common.css",并且可以正常调试。打包到服务器上时,有时会把资源文件和HTML分开存放,有时就保留原始目录结构放在同一个文件夹下。但尽管放在同一个文件夹下,原来的相对路径却无法正常在浏览器中引用了,这是为什么呢?

因为HTML文件中的相对路径,在浏览器环境下,会引用的实际路径是相对服务器根目录的路径。如HTML代码中引用了"image/xxx.png",服务器地址是"localhost:8080", 页面的地址是"localhost:8080/hello/index.html", 反馈到浏览器中则不是期望的"localhost:8080/hello/image/xxx.png", 而是"localhost:8080/image/xxx.png",这样就无法正确地引用到文件了。

因此,实际部署时正确的引用方式应该是"hello/image/xxx.png". 实际上是一个相对服务器根目录的绝对路径。