CSS双百分号异常：仅输入两个%时元素才正常显示

嗨，这个问题我之前在混合使用服务器端模板和前端框架时也踩过坑！核心原因是你的项目里同时在用服务器端模板引擎（比如Velocity、FreeMarker这类）和AngularJS，两者的语法冲突导致了这个奇怪的现象。

具体原因拆解： #

像Velocity、FreeMarker这类服务器端模板引擎，会把单个%当作模板指令的起始标识——比如你可能见过的#if、#foreach这类控制指令，都是基于%来识别的。当你在模板里写style="width:50%"时，服务器端引擎会把这个单独的%误判为模板指令的一部分，而不是普通的CSS单位符号。

最终服务器编译完输出给浏览器的代码里，width:50%就变成了width:50——没有了百分号，浏览器会把这个值解析成无效的宽度（通常是0或者极小的尺寸），所以你的音频标签看起来就“消失”了。

而当你写50%%时，服务器端模板引擎会把这两个%识别成转义字符，最终输出到浏览器的就是正常的width:50%，元素自然就能按预期显示了。

快速验证方法： #

打开浏览器开发者工具（按F12），查看页面的最终渲染源代码：

• 用50%时，audio标签的style属性会是width:50（缺失百分号）
• 用50%%时，style属性会是width:50%（正确格式）

解决办法： #

1. 遵循服务器端模板的转义规则：根据你用的模板引擎，用对应的方式转义百分号（比如Velocity就是%%，FreeMarker可以用\%%，具体查对应引擎的官方文档）
2. 改用AngularJS的ng-style绑定：把样式交给AngularJS在前端解析，避开服务器端的干扰，示例代码如下：

<!-- 音频标签的样式绑定 -->
<audio ng-style="{width: '50%'}" controls="controls">
  Your browser does not support the <code>audio</code> element.
  <source src="music_mix.mp3" type="audio/mp3">
</audio>

<!-- 滑块容器的样式绑定 -->
<div class="slidecontainer" ng-style="{width: '50%'}">
  <input style="border-radius: 5px;" type="range" min="1" max="20" value="14" ng-change="updateValue()" ng-model="trueSpeed" class="slider" >
</div>

这种方式下，样式字符串是由AngularJS在前端处理的，不会被服务器端模板引擎误解析。

内容的提问来源于stack exchange，提问作者ale10ander