我遇到了一个奇怪的边界框问题。正如您在屏幕截图上所看到的，广告_代理的边界框的位置是真实元素位置右侧的1-2个像素。我没有奇怪的空白，填充等，都是正常的。广告_代理令牌/芯片下方的小条带（4px高）从.getBoundingClientRect（）开始定位，其宽度等于令牌的宽度。看起来芯片的视觉宽度小于它的边界框宽度，并且它将所有过去的元素移出边界框（不知何故）。如果我设置常量宽度（例如宽度：150px；）-问题消失，但任何其他宽度选项都会出现此错误。

我使用TypeScript，Mobx，React，CSS.

const Container = styled(CFlex)<{color: string}>`
    height: 28px;
    background-color: ${props => props.color};
    border-radius: 2px;
    display: inline-flex;
    color: white;
    margin-right: 12px;
    align-items: center;
    position: relative;
    z-index: 20;
    &:hover {
      z-index: 23;
}`

不知道这是否重要，我使用React Clone插入令牌并添加鼠标事件：

{React.cloneElement(this.props.children, {
                onMouseLeave: this.referenceMouseHandler,
                onMouseEnter: (event) => this.referenceMouseHandler(event, true),
            })}

其中this.props.children=标记

有人知道如何解决这个问题吗？

最低版本（看起来像内容定位错误）：在此处

顺晟科技：