SCSS在JSFiddle中失效，跨浏览器（Firefox/Chrome/Safari）定位问题求助

一、SCSS在JSFiddle中无法渲染生效的问题 #

这个问题大概率是JSFiddle的CSS面板语言设置没切换到SCSS导致的。默认情况下，JSFiddle的CSS编辑器是普通CSS模式，不会自动编译SCSS语法。

解决方案： #

1. 打开你的JSFiddle项目，切换到CSS面板
2. 点击面板左上角的语言选择下拉框（默认显示"CSS"）
3. 选择"SCSS"选项，JSFiddle就会自动编译你的SCSS代码并生效了

如果你的SCSS用到了@import或其他依赖，也要确保这些资源能正常加载，但最常见的触发原因还是语言设置不对。

二、Firefox中span覆盖在img上方的跨浏览器定位问题 #

从现象来看，这是不同浏览器对行内元素垂直对齐规则的解析差异导致的。Chrome和Safari默认会把行内元素按基线对齐，而Firefox的处理逻辑略有不同，最终让span跑到了img上方。

解决方案（推荐两种，选适合你的场景）： #

方案1：将img设置为块级元素

给img添加CSS样式：

.title-preview img {
  display: block;
}

这样img会独占一行，span自然会跑到它的正下方，所有浏览器表现完全一致。

方案2：调整垂直对齐方式

如果需要保持img为行内元素，可以设置它的垂直对齐属性：

.title-preview img {
  vertical-align: bottom;
}

这个属性会强制img的底部和父容器的底部对齐，span就不会往上偏移了。

额外检查点：

如果你的代码里给img或span加了float属性，记得给span添加clear: both;来清除浮动影响，否则也可能导致类似的定位异常。

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