超级菜单在所有浏览器中均无法正常工作，并且无法响应

问题描述

我的投资组合网站出现一个非常奇怪的问题。在Google Chrome浏览器中，一切正常运行，没有问题。但是在其他浏览器（如Firefox，Microsoft Edge，Opera Mini）中，大型菜单破坏了响应能力。

https://www.nockscript.com/转到网站，您会发现一个名为“我的创作”的菜单，使用Chrome浏览器将其悬停并检查预览。在Firefox或Microsoft Edge上执行相同的操作，您将了解问题所在。

注意：我使用的是wordpress平台，该超级菜单来自主题默认设计。我希望超级菜单预览在所有浏览器中都将与Chrome浏览器中的显示相同。

解决方法

在chrome中，一个JavaScript将megamenu的宽度设置为可用屏幕尺寸的100％。但是由于某种原因，它不能在Firefox中使用。

由于已启用缓存插件，因此在缩小的js文件中跟踪问题并不容易。但可以确定问题出在此文件中：

neuron-core-kyoto /资产/脚本/ elementor_ {something} .js

您应该首先禁用缓存并缩小，然后在上述文件中找到以下代码：

import bs4
import requests

url = "https://parts.bmwmonterey.com/a/BMW_2004_330i-Sedan/_52014_5798240/Cooling-System-Water-Hoses/17_0215.html"

resp = requests.get(url)

soup = bs4.BeautifulSoup(resp.text,"html.parser")

img = soup.find('img')

image = img["src"]

img_url = "https://parts.bmwmonterey.com" + str(image)

r = requests.get(img_url)

with open("image.jpg","wb") as f:
    f.write(r.content)

然后跟踪width和offset的值是什么，并检查这段代码是否甚至在FireFox中运行。

更新：

我已经检查了您的代码。它正在尝试通过以下方式计算页面的宽度：

$subMenu.css({width:width,left:offset})

问题是由columnPadding引起的，该列是使用以下代码提取的：

var width=$elementorContainer.outerWidth()-columnPadding*2

问题是，当您在Firefox中获得columnPadding=parseInt($menu.parents('.elementor-column-wrap').css('padding'))时，它返回css('padding')，而在Chrome中，您返回""。然后parseInt将其在firefox中转换为“ NaN”，在Chrome中将其转换为“ 0”。因此CSS代码不适用于FF。

我已经更改了填充以检查问题是否为0填充，但是在Firefox中其行为没有改变。事实是"0px"或padding-left，padding-right，padding-bottom在Firefox中都可以正常工作。

我也在其他站点上进行了检查，并且在那里也发生了同样的事情。

我还发现：

https://github.com/jquery/jquery/issues/3383

您需要在以下类别中删除position: relative;，并设置position:unset：

.elementor-element-f666f66,.elementor-element-f666f66 .elementor-column-wrap,.elementor-element-f666f66 .elementor-column-wrap .elementor-widget-wrap,.elementor-element-f666f66 .elementor-column-wrap .elementor-widget-wrap .elementor-widget{
    position: unset !important;
 }
 .m-nav-menu--horizontal ul li.menu-item.menu-item-has-children > ul.sub-menu{
    top: 0 !important;
 }

因此，实际上Firefox正在遵守相对位置规则以保持容器的宽度

javascript responsiveness wordpress wordpress