CSS设置大引号后小屏幕行高异常，如何保持行高一致或优化实现？

首先，可以保持行高一致，核心思路是让大尺寸的引号伪元素脱离文档流，不占用行内布局空间，这样就不会影响段落的正常行高。

你可以修改CSS代码如下：

.quote {
    font-style: italic;
    margin-bottom: 20px;
    position: relative; /* 为伪元素定位提供参考容器 */
    padding-left: 1.5em; /* 给左侧引号预留空间 */
    padding-right: 0.5em; /* 给右侧引号预留空间 */
}
.quote:before {
    content: open-quote;
    font-size: 2.5em; /* 按需调整引号大小 */
    position: absolute;
    left: 0;
    top: 0.1em; /* 垂直微调，让引号和段落文字对齐更自然 */
    line-height: 1; /* 重置行高，避免干扰文本行高 */
}
.quote:after {
    content: close-quote;
    font-size: 2.5em;
    position: absolute;
    right: 0;
    bottom: 0.2em; /* 关闭引号通常靠下，微调位置适配 */
    line-height: 1;
}

其他优化方案（如果定位方式不适用） #

• 背景图片实现：将引号做成SVG或PNG图标，通过background-image设置在段落的左右两侧，用background-position控制位置，完全不干扰文本流布局。
• 垂直对齐调整：给伪元素设置vertical-align: middle或vertical-align: top，同时强制其line-height: 1，减少对行高的影响，但这种方式在极端窄屏幕下仍可能出现轻微行高波动，稳定性不如定位方案。

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