overflow:visible仅Chrome生效，其他浏览器无效果的技术求助

问题背景 #

在所有包含产品卡片的页面（示例页面滚动至产品详情下方），通过Code Snippets插件添加JS代码实现hover时图片下移以展示完整产品，但图片下移后溢出部分仅在Chrome中可见，Firefox中即使已应用overflow: visible样式仍无效。

当前使用的代码：

• JS代码：

const imageWrappers = document.querySelectorAll('.woocommerce-image__wrapper');

for (let i = 0; i < imageWrappers.length; i++) {
    const wrapperHeight = imageWrappers[i].offsetHeight;
    const image = imageWrappers[i].querySelector('.gallery-image');
    image.style.paddingTop = `${0.68 * wrapperHeight}px`;
    image.style.overflow = visible; /* 此处设置无效 */
}

• CSS代码：

div.woocommerce-image__wrapper > a > img.gallery-image
{
    overflow: visible !important;
}

问题根源 #

1. overflow 属性作用对象错误：overflow是控制容器元素内容溢出的属性，直接给<img>标签设置overflow: visible没有意义——<img>属于替换元素，其溢出显示由父容器决定。
2. Firefox解析逻辑更严格：Firefox对替换元素的溢出控制逻辑更严谨，只要图片的父容器（如.woocommerce-image__wrapper或内部的<a>标签）设置了overflow: hidden，即使给图片添加overflow样式，溢出部分仍会被截断。

解决方案 #

1. 移除无效的overflow设置

直接删除JS中image.style.overflow = visible;（此处还存在语法错误，visible需加引号，但本身逻辑无效），同时删除CSS中针对<img>的overflow: visible !important;规则。

2. 给图片的父容器设置overflow: visible

修改CSS，确保图片的直接父容器及上级容器允许内容溢出：

/* 确保图片外层的wrapper允许溢出 */
.woocommerce-image__wrapper {
    overflow: visible !important;
}
/* 确保包裹图片的<a>标签允许溢出，并设置为块级元素 */
.woocommerce-image__wrapper > a {
    overflow: visible !important;
    display: block;
}

3. 优化JS逻辑（可选，适配hover触发）

如果需要仅在hover时触发图片下移，可将JS调整为监听鼠标事件：

const imageWrappers = document.querySelectorAll('.woocommerce-image__wrapper');

imageWrappers.forEach(wrapper => {
    // 鼠标移入时下移图片
    wrapper.addEventListener('mouseenter', () => {
        const wrapperHeight = wrapper.offsetHeight;
        const image = wrapper.querySelector('.gallery-image');
        image.style.paddingTop = `${0.68 * wrapperHeight}px`;
    });
    // 鼠标移出时恢复原位
    wrapper.addEventListener('mouseleave', () => {
        const image = wrapper.querySelector('.gallery-image');
        image.style.paddingTop = '0';
    });
});

额外检查

用浏览器开发者工具检查.woocommerce-image__wrapper的所有上级元素，确保没有其他设置了overflow: hidden的容器，若有则需针对性添加overflow: visible（注意不要影响页面其他布局）。

内容的提问来源于stack exchange，提问作者José Guedes