传单没有在 IE/Safari 中显示 Control.extend 数据，直到移动或单击地图答案

【问题标题】：Leaflet is not showing Control.extend data in IE/Safari till a move or click on map传单没有在 IE/Safari 中显示 Control.extend 数据，直到移动或单击地图
【发布时间】：2018-06-04 01:32:37
【问题描述】：

Leaflet 未在 IE 和 safari 中显示 Control.extend 数据。 IE 在地图上移动后显示计数器框。 Safari 在单击后会显示该框。

对于我的第二次扩展（弹出）Safari 需要在标记上单击 2 次。并且 IE 仅在按住鼠标按钮时显示它。

预期结果：

Chrome、Edge 和 Firefox 运行良好。

修改后的代码：

 <!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>Bee-Idees kaart</title>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />

<script type='text/javascript' src='https://unpkg.com/leaflet@1.3.1/dist/leaflet.js'></script>
<script type='text/javascript' src='https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js'></script>
<script type='text/javascript' src='https://unpkg.com/leaflet.featuregroup.subgroup@1.0.2/dist/leaflet.featuregroup.subgroup.js'></script>
</head>
<style>
.my-custom-counters {
    padding: 10px 10px;
    background: #7ab51d;
    color: #000;
    font-size: 11px;
    line-height: 11px;
    width: 310px;
    border-radius: 15px;
    border-style: solid;
    border-color: #3A8D45;
    border-width: 1px;
    opacity: 0.85;
}
.my-custom-counters .ImpactHeader {
    color: #fff;
    line-height: 14px;
   text-align: center;
   font-weight: 600;
   margin-bottom: 5px;
}

.my-custom-counters .ImpactLead {
font-weight: 500;
}

.my-custom-counters .ImpactCount {
    text-align: right;
    font-weight: 600;
}

.my-custom-counters .ImpactEnd {
    font-weight: 500;
}

.my-custom-counters:empty {
    display: none;
}
</style>

<body>
<div id="map" style="height: 580px; border: 1px solid #AAA;"></div>
</body>

<script>
markers = [
{
    "name": "Gouda 3",
    "lat": 52.021616,
    "lng": 4.687917, 
    "marker": "red"
}
];
</script>  

<script>
var iconBase = 'css\\icons\\';
// Standard fields
var groupLabel = [];
groupLabel[0] = "Red";

var map = L.map('map', {
center: [52.021616, 4.85],
zoom: 10
});

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>',
subdomains: ['a', 'b', 'c']
}).addTo(map);

var mcg = L.markerClusterGroup(),
group0 = L.featureGroup.subGroup(mcg),
control = L.control.layers(null, null, { collapsed: false }), i, a, title, m; 
mcg.addTo(map);

var markerClusters = L.markerClusterGroup();

for (var i = 0; i < markers.length; ++i) {
var iconName = iconBase + markers[i].marker + ".png";
var myIcon = L.icon({ iconUrl: iconName, iconAnchor:   [20, 40] }) 
var popup = '<h2>' + markers[i].name + '</h2>';

var m = L.marker( [markers[i].lat, markers[i].lng], {icon: myIcon, title: markers[i].name} )
              .bindPopup( popup );

if (markers[i].marker === "red") { m.addTo(group0);} 
}

control.addOverlay(group0, groupLabel[0]);
control.addTo(map);

group0.addTo(map); 

map.addLayer(mcg);
var MyCounters = L.Control.extend({
    options: {
        position: 'bottomright'
    },
    onAdd: function (map) {
        return L.DomUtil.create('div', 'my-custom-counters');
    },
    setContent: function (content) {
        this.getContainer().innerHTML = content;
    }
});
myCounters = new MyCounters().addTo(map);
showCounters();

function showCounters() {
impact = '<div class="ImpactHeader">TOTAAL GEMETEN IMPACT VAN ALLE PROJECTEN<br>ZICHTBAAR OP DE KAART<br> </div> <div class="undefined"> <table style="width:100%;"> <tr> <td> <div class="ImpactLead">Winst besteed aan kansarmen : </div> </td> <td> <div class="ImpactCount">275 </div> </td> <td> <div class="ImpactEnd">€ (Euro) </div> </td> </tr><tr> <td> <div class="ImpactLead">Toegang tot financiële diensten: </div> </td> <td> <div class="ImpactCount">176 </div> </td> <td> <div class="ImpactEnd">Personen </div> </td> </tr><tr> <td> <div class="ImpactLead">Veilig en gezond voedsel: </div> </td> <td> <div class="ImpactCount">250 </div> </td> <td> <div class="ImpactEnd">Personen </div> </td> </tr></table> </div>'
myCounters.setContent(impact);
}
</script>
</html>

似乎 IE 无法处理添加更复杂的字符串来扩展。

【问题讨论】：

标签： css internet-explorer safari leaflet innerhtml

【解决方案1】：

您的自定义控件最初是空的。

如果您希望从一开始就填充它们，您至少应该在将计数器控件添加到地图后立即调用您的 showCounters 函数。弹出控件也是如此。

对于后者，您使用popup 选项、buildPopupinfo 函数和几个变量（Maps、Markers 和popup），您没有解释/显示如何分配它们。问题看起来很可能在那些。

使用新代码编辑问题后：

嗯，您似乎遇到了一个带有:empty CSS 伪选择器并使用innerHTML 动态填充元素的IE 错误。

似乎只是用单个外部元素（如<div>）包装您的HTML内容可以避免这个错误：

// The "one" Element is filled with a SINGLE child (but it can have many grand children)
document.getElementById('one').innerHTML = '<div> <div>one</div> <div>one</div> </div>';

// The "two" Element is filled with 2 children nodes
// Try clicking somewhere else on the page to "reveal" it
document.getElementById('two').innerHTML = '<div>two</div><div>two</div>';

.auto-hide {
  background-color: green;
  border: 1px solid black;
  width: 100px;
  height: 40px;
}

.auto-hide:empty {
  display: none;
}

<div id="one" class="auto-hide"></div>
<div id="two" class="auto-hide"></div>

我猜你的弹出窗口有类似的 CSS 规则，因此也有类似的行为。

我完全无法使用上述代码 sn-p 或问题中提供的代码在 Safari (11.1) 上重现该问题：

https://plnkr.co/edit/YDbSFQeaUYtVBadKnnbU?p=preview

【讨论】：

showCounters 在收集完所有 JSON 数据后调用，以计算范围内的所有影响。请记住，Chrome、Edge 和 Firefox 正在按预期处理它。
在一个标记点击处，所有的弹出信息在 buildPopupinfo 中合并为一个大的 html 字符串并传递给 setContent。 Chrome、Edge 和 firefox 再次运行良好。只有 IE 和 Safari 没有
可能是这样，但您没有提供MCVE 让人们正确调查。您可以很容易地理解，如果没有它，并且代码中缺少部分，就不可能进一步帮助您，尤其是考虑到您描述的奇怪的兼容性行为。请记住，虽然人们会在空闲时间帮助您，但这不是浪费它的理由。通过在您的问题中提供足够的数据，您将获得更多相关帮助并充分利用每个人的时间。
很抱歉没有加载完整的代码。现在可以通过以下方式访问该项目：markup-mvc-test.azurewebsites.net//leaflet/leaflet.html
请编辑您的问题，并在其中包含重现您问题的最低代码。虽然链接到您的外部服务器是向前迈出的一步，但它不会帮助可能不再访问它的未来读者。甚至没有谈论您将项目剥离到产生问题的唯一部分的期望。最后，编辑您的问题会使问题更加突出，因此它会更加明显，希望更多人可以帮助您。

【解决方案2】：

Tnx 为解决方案。用一个额外的 div 将我的内容（showCounters 和 buildPopupinfo）包装在 IE 上。

Safari 仍然无法正常工作。它仍然需要在地图上单击以获取 showCounters，并在标记上单击 2 次以获取 buildPopupinfo。

【讨论】：

如果您没有为您的问题提供解决方案，请使用 cmets 而不是 answer 文本区域。
抱歉，我无法在 Safari 11.1 上重现您的问题。请参阅我编辑的答案中的 Plunker 链接。
所以我想这是我的 safari for windows craping up。我已经看到很多关于 safari 需要在旧版本上单击 2 次的评论。我会让在他的iphone上测试过的人再测试一次。认为它是封闭的
感谢您的反馈。请将帮助您解决问题的答案标记为已接受，以便人们知道您的问题已结束。