Javascript 代码仅在 firefox 浏览器中损坏

Question

我创建了一个div C.

它的绝对位置设置在divA的下边距和divB的上边距之间。

每个div都是一个等宽的矩形。

C 比 A 和 B 低。我使用此解决方案是为了“隐藏”A 和 B 的两个背景图像之间的接缝，方法是覆盖它们的边距彼此相交的区域。 C本身就有背景图

我管理这些设置使用 Javascript 代码插入到 WP 主题仪表板的正确位置（Uncode 主题，我没有使用 Javascript pligin）。

所有浏览器都可以（我试过很多浏览器，手机版也试过），但Firefox。我真的不明白为什么。

密码是：

var divTop = document.getElementsByClassName("A")[0].clientHeight;
var divWidth = document.getElementsByClassName("A")[0].clientWidth;
var Gap = document.getElementsByClassName("C")[0].clientHeight/2;
document.getElementsByClassName('C')[0].style.top=divTop-Gap + ".px";
document.getElementsByClassName('C')[0].style.width=divWidth + ".px";

你可以自己验证一下：https://www.dolomitiinebike.it/

该网站在每个浏览器中都运行良好，但用 firefox 打开它，一切都坏了。

Answer 1

我解决了安装 plug-in 以添加 Javascript 和 Jquery 脚本（JS 插入器）的问题，然后我将代码从 Javascript 翻译成 Jquery .我添加脚本页脚部分。此解决方案也与 Firefox 兼容。

var topHeight = jQuery('A').outerHeight();
var width = jQuery('A').outerWidth();
var gap = jQuery('C').outerHeight()/2;
jQuery('C').css({ top : topHeight - gap + "px" }); 
jQuery('C').css({ width : width  + "px" });

Javascript 代码仅在 firefox 浏览器中损坏

Javascript code broken in firefox browser only

javascript

css

wordpress

firefox