嗨，针对你遇到的Android Chrome里带播放按钮的段落字体莫名缩小的问题，我给你两个贴合需求的解决方案，刚好对应你提到的两种思路：

方案一：调整Button标签的样式属性 #

问题大概率是Android Chrome对button标签的默认样式处理比较特殊——它自带的内边距、字体大小或者行高没有继承段落的属性，导致浏览器误以为段落需要适配按钮的“特殊尺寸”，进而缩小了整个段落的字体。咱们只需要让button完全继承段落的文本样式，就能解决这个问题：

给button标签添加内联样式，强制它继承父元素的字体大小、行高，同时调整垂直对齐和内边距，让它和普通文本融为一体：

<p>This paragraph contains a play-button
<audio id="dog" src="ch1dog.wav"></audio>
<button onclick="playAudio('dog')" type="button" style="font-size: inherit; line-height: inherit; padding: 0 4px; vertical-align: middle;">play</button>
which causes the text to shrink.</p>

这里的关键样式是font-size: inherit和line-height: inherit，确保按钮和段落文本用一样的字号和行高；vertical-align: middle让按钮和文本垂直居中对齐，padding: 0 4px则给按钮留一点点点击空间，避免太拥挤。

方案二：用图标字符替代Button标签 #

如果不想用button标签，直接用你提到的►这类图标字符也是个好办法——纯文本元素不会触发Chrome的特殊布局逻辑，完全和普通文本表现一致。只需要给字符加点击事件和鼠标样式，让用户知道它可点击：

<p>This paragraph contains a play-button
<audio id="dog" src="ch1dog.wav"></audio>
<span onclick="playAudio('dog')" style="cursor: pointer; font-size: inherit; vertical-align: middle;">►</span>
which causes the text to shrink.</p>

用<span>包裹图标字符，加上cursor: pointer让鼠标悬停时变成手型，用户一眼就能明白这是可点击的播放按钮，同时完全不会影响段落的字体大小。

这两种方法都能保证点击元素和普通文本无缝融合，不会出现侧边栏、单独段落这类破坏布局的情况，完美适配你的需求~

备注：内容来源于stack exchange，提问作者user6726