Firefox中position:absolute元素无法resize，需保留pointer-events:none的解决办法

我有一个可调整大小的div，代码如下：

#item {
  height: 10rem;
  width: 10rem;
  resize: both;
  overflow: hidden;
  border: solid black 0.5rem;
  position: absolute;
  pointer-events: none;
}

<div id="item"></div>

这个元素在Brave浏览器里能正常调整大小，但Firefox里不行。排查后发现是position:absolute的问题，但要是去掉这个属性，Brave里又没法调整了。现在需要在保留pointer-events:none的前提下，让Firefox也能调整这个元素的大小，优先纯CSS方案，也可以接受JS替代方案。

纯CSS解决方案 #

Firefox里，当元素同时设置pointer-events:none和position:absolute时，resize的手柄会失效。我们可以给目标元素加个透明伪元素来解决——伪元素铺满原元素，不设置pointer-events:none，这样Firefox就能识别到resize手柄，同时原元素的pointer-events:none特性不受影响。

修改后的CSS代码：

#item {
  height: 10rem;
  width: 10rem;
  resize: both;
  overflow: hidden;
  border: solid black 0.5rem;
  position: absolute;
  pointer-events: none;
}

/* 给Firefox添加可触发resize的伪元素 */
#item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: auto; /* 允许鼠标事件 */
  opacity: 0; /* 完全透明，不影响视觉 */
}

这个方案逻辑很简单：伪元素盖在原元素上面，负责接收鼠标事件，让Firefox能触发resize；原元素保持pointer-events:none，不会干扰页面其他元素的交互。而且Brave也能正常工作，伪元素的存在不会影响它原本的resize逻辑。

JavaScript替代方案 #

如果纯CSS方案不适用，也可以用JS手动实现resize功能，通过监听鼠标事件来调整元素尺寸：

<div id="item"></div>

<script>
const item = document.getElementById('item');
let isResizing = false;
let startX, startY, startWidth, startHeight;

// 创建右下角的resize手柄（透明，不影响视觉）
const resizeHandle = document.createElement('div');
resizeHandle.style.position = 'absolute';
resizeHandle.style.bottom = '0';
resizeHandle.style.right = '0';
resizeHandle.style.width = '15px';
resizeHandle.style.height = '15px';
resizeHandle.style.background = 'transparent';
resizeHandle.style.cursor = 'se-resize';
item.appendChild(resizeHandle);

// 手柄按下时记录初始状态
resizeHandle.addEventListener('mousedown', (e) => {
  isResizing = true;
  startX = e.clientX;
  startY = e.clientY;
  startWidth = parseInt(getComputedStyle(item).width, 10);
  startHeight = parseInt(getComputedStyle(item).height, 10);
  e.stopPropagation(); // 阻止事件冒泡，避免影响其他元素
});

// 鼠标移动时调整尺寸
document.addEventListener('mousemove', (e) => {
  if (!isResizing) return;
  const newWidth = startWidth + (e.clientX - startX);
  const newHeight = startHeight + (e.clientY - startY);
  item.style.width = `${newWidth}px`;
  item.style.height = `${newHeight}px`;
});

// 鼠标松开结束resize
document.addEventListener('mouseup', () => {
  isResizing = false;
});
</script>

这个方案手动实现了resize逻辑，不受浏览器对resize属性和pointer-events的兼容性限制，同时原元素的pointer-events:none属性也能保留。

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