Symfony项目Tab面板内嵌Leaflet地图出现方格棕色线条如何解决

1. 自定义CSS污染Leaflet瓦片元素：你定义的.tab-container .panel img规则会命中地图内所有瓦片图片，给每个瓦片额外添加了10px内边距、94%最大宽度限制，导致瓦片之间出现间隙，你看到的棕色方格线就是间隙露出的容器背景色。
2. 隐藏容器初始化异常：你的地图放在默认隐藏的第三个Tab面板中，Leaflet初始化地图时无法获取容器的真实宽高，会导致瓦片加载错位、布局异常，加重线条显示问题。
3. 可选遗漏项：未正确引入Leaflet官方CSS，缺失瓦片默认的边距重置规则。

• 新增CSS规则隔离Leaflet样式，避免自定义img样式影响瓦片，在你的样式文件中添加如下代码：

/* 覆盖自定义样式对Leaflet瓦片的影响 */
#macarte2 .leaflet-tile {
    padding: 0 !important;
    margin: 0 !important;
    max-width: unset !important;
    border: none !important;
}

• 处理隐藏容器初始化问题，在切换到地图所在Tab时，手动触发地图尺寸重算。假设你初始化第二张地图时定义的变量名为map2，在你的Tab切换逻辑中新增如下代码：

// 点击第三个「Carte」Tab时触发重算
document.querySelectorAll('.tabA')[2].addEventListener('click', function() {
    // 等待Tab面板渲染完成后执行
    setTimeout(() => {
        map2.invalidateSize()
    }, 10)
})

• 确认页面已正确引入Leaflet官方CSS文件，这是Leaflet正常渲染的必要依赖。

内容的提问来源于stack exchange，提问作者Diego de Massy