IE11中的弹出容器的大小错误

时间：2019-04-29 12:45:20

标签： javascript html css leaflet internet-explorer-11

我使用的是传单地图，并使用Bootstrap 4进行​​了自定义弹出式设计。在每个浏览器上，除IE11之外，该设计看起来都不错，但我在其中找不到问题。好像IE11不知道CSS边距标记。

在Firefox中弹出窗口的外观： [Firefox中的弹出窗口] [1] [！[在此处输入图片描述] [2]] [2]

在IE11中弹出窗口的外观：

[IE11中的弹出窗口] [3] [！[在此处输入图片描述] [4]] [4]

CSS：

#map {
  height: 680px;
}

.custom .leaflet-popup-tip,
.custom .leaflet-popup-content-wrapper {

background: rgba(255,255,255,1);    
}


.card-text {
    font-size: 11px;
    color: black !important;
    text-align: justify;

}
.card-title {
    color: rgb(9, 65, 139) !important;
}
.container{
    width:450px;
}
.imgar{

}
.imgar:hover{
     background:rgb(9, 65, 139, 0.8);
     padding: 5px 5px 5px 5px;
}
.card{
    border:0;
    background: rgba(255,255,255,1);
}
.imgc{
    width: 500px;
}
.cont{
    margin: 11px 11px;

}
.cont_1{
    padding: 15px 10px 10px 10px;
}
.leaflet-container a.leaflet-popup-close-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0px 0px 0 0;
    border: none;
    text-align: center;
    width: 18px;
    height: 14px;
    font: 16px/14px Tahoma, Verdana, sans-serif;
    color: red;
    text-decoration: none;
    font-weight: bold;
    background: transparent;
    }
.leaflet-container a.leaflet-popup-close-button:hover {
    color: #999;
    }
.thumbnail {
  float: left;
  position: relative;
  left: 0px;
  top: -30px;
  height: 150px;
  width:250px;
  -webkit-box-shadow: 7px 7px 35px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 7px 7px 35px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 7px 7px 35px 0px rgba(0, 0, 0, 0.75);
  overflow: hidden;
}
.container{
    margin: 20px 20px 20px 20px
}
.right {
  margin-left: 260px;
  margin-right: 50px;
}
.atstarpe{
    padding: 5px 5px 5px 5px;
}
.adrese{
}

HTML：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>OpenStreetMap &amp; OpenLayers - Marker Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="leaflet.css"/>
    <!-- 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" />
    <link rel="stylesheet" href="leaflet-control-credits.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="leaflet-control-credits.css" />
    <!-- javascript -->
     <script src="leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script type="text/javascript" src="leaflet-control-credits.js"></script>
    <script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>

 <!-- Customs -->
      <script src="customer.js"></script>
     <link rel="stylesheet" href="styler.css" type="text/css">
</head> 

<body onload="initmap()">
  <div id="map"></div>
</body>

</html>

Javascript：

function initmap(){
               // var map = L.map("map").setView([56.949500, 24.107220], 45);
                var map = L.map('map',{
                center: [56.94645, 24.12501],
                    zoom: 12,   
                    minZoom: 10,
                    });

               L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png').addTo(map);

                var greenIcon = L.icon({
    iconUrl: 'images/marker_9.png',
    shadowUrl: 'images/Marker_Gray(2).png',
    iconSize:     [40, 49], // size of the icon
    shadowSize:   [50, 59], // size of the shadow
    iconAnchor:   [20, 49], // point of the icon which will correspond to marker's location
    shadowAnchor: [13, 49],  // the same for the shadow
    popupAnchor:  [0, -42] // point from which the popup should open relative to the iconAnchor
});


 // create popup contents
    var customPopup = "<!--Card--><div class='card card-cascade narrower mb-4' style='margin-top: 28px'><!--Card image--><div class='view view-cascade'><div class='view overlay zoom'><img src='./images/aizsaules_1a.jpg'  class='img-fluid ' alt=''></div><a href='http://localhost:8080/Karte_simb/images/aizsaules_1a.jpg' target='_blank'><div class='mask rgba-white-slight'></div></a></div><!--/.Card image--><!--Card content--><div class='card-body card-body-cascade'><h5 class='pink-text'><i class='fas fa-map-marker-alt'></i> Aizsaules iela 1a</h5><!--Title--><h4 class='card-title'>Kapsētas ieejas vārti</h4><!--Text--><p class='card-text'>Sākotnējais nosaukums – Rīgas Jaunie kapi. 1925. gadā šajos kapos tika apglabātas dažādas personas, kuras nepiederēja pie nevienas draudzes. Oficiāli kapsētu atklāja 1929. gadā, kad tajā tika apglabāts latviešu dzejnieks Rainis (īstajā vārdā – Jānis Pliekšāns). Pēc tam kapsēta tika pārdēvēta par Raiņa kapiem.</p><!--/.Card content-->";

    //var customPopup_3 = "<div class='cont'><div class='row'><div class='col-7'><div class='text-center'><h5 class='card-title text-center text-justify'>Kapsētas ieejas vārti </h5><p class='card-text'>Sākotnējais nosaukums – Rīgas Jaunie kapi. 1925. gadā šajos kapos tika apglabātas dažādas personas, kuras nepiederēja pie nevienas draudzes. Oficiāli kapsētu atklāja 1929. gadā, kad tajā tika apglabāts latviešu dzejnieks Rainis (īstajā vārdā – Jānis Pliekšāns). Pēc tam kapsēta tika pārdēvēta par Raiņa kapiem.</p></div> </div><div class='col-md-5'><div id='carouselExampleControls' class='carousel slide' data-ride='carousel'><div class='carousel-inner'><div class='carousel-item active'><a href='http://localhost:8080/Karte_simb/images/aizsaules_1a.jpg' target='_blank'><img class='d-block w-100 ' src='http://localhost:8080/Karte_simb/images/aizsaules_1a.jpg' alt='Pirmais slaids'></a></div><div class='carousel-item'><a href='http://localhost:8080/Karte_simb/images/aizsaules_1a_2.jpg' target='_blank'><img class='d-block w-100' src='http://localhost:8080/Karte_simb/images/aizsaules_1a_2.jpg' alt='Otrais slaids'></a></div></div><a class='carousel-control-prev' href='#carouselExampleControls' role='button' data-slide='prev'><span class='carousel-control-prev-icon' aria-hidden='true'></span><span class='sr-only'>Iepriekšējais</span></a><a class='carousel-control-next' href='#carouselExampleControls' role='button' data-slide='next'><span class='carousel-control-next-icon' aria-hidden='true'></span><span class='sr-only'>Nākošais</span></a></div><br><img src='https://cdn3.iconfinder.com/data/icons/map-markers-1/512/residence-512.png' width='20'><span class='glyphicon glyphicon-envelope card-text font-weight-bold'> Aizsaules iela 1a</span><br><br><img src='https://cdn2.iconfinder.com/data/icons/picons-basic-1/57/basic1-011_calendar-512.png' width='20'><span class='glyphicon glyphicon-envelope card-text font-weight-bold'> 1929. gads</span></div></div></div></div>";
    var customPopup_d = "<div class='card' style='width: 18rem;'><div id='carouselExampleControls' class='carousel slide' data-ride='carousel'><div class='carousel-inner'><div class='carousel-item active'><a href='http://localhost:8080/Karte_simb/images/aizsaules_1a.jpg' target='_blank'><img class='d-block w-100' src='http://localhost:8080/Karte_simb/images/aizsaules_1a.jpg' alt='First slide'></a></div><div class='carousel-item'><a href='http://localhost:8080/Karte_simb/images/aizsaules_1a_2.jpg' target='_blank'><img class='d-block w-100' src='http://localhost:8080/Karte_simb/images/aizsaules_1a_2.jpg' alt='Second slide'></a></div></div><a class='carousel-control-prev' href='#carouselExampleControls' role='button' data-slide='prev'><span class='carousel-control-prev-icon' aria-hidden='true'></span><span class='sr-only'>Previous</span></a><a class='carousel-control-next' href='#carouselExampleControls' role='button' data-slide='next'><span class='carousel-control-next-icon' aria-hidden='true'></span><span class='sr-only'>Next</span></a></div><div class='card-body'><h5 class='card-title text-center'> Kapsētas ieejas vārti </h5><p class='card-text'>Sākotnējais nosaukums – Rīgas Jaunie kapi. 1925. gadā šajos kapos tika apglabātas dažādas personas, kuras nepiederēja pie nevienas draudzes. Oficiāli kapsētu atklāja 1929. gadā, kad tajā tika apglabāts latviešu dzejnieks Rainis (īstajā vārdā – Jānis Pliekšāns). Pēc tam kapsēta tika pārdēvēta par Raiņa kapiem.</p><div class='row'><div class='col'><img src='https://cdn3.iconfinder.com/data/icons/map-markers-1/512/residence-512.png' width='20'><span class='glyphicon glyphicon-envelope card-text font-weight-bold'> Aizsaules iela 1a</span></div><div class='col'><img src='https://cdn2.iconfinder.com/data/icons/picons-basic-1/57/basic1-011_calendar-512.png' width='20'><span class='glyphicon glyphicon-envelope card-text font-weight-bold'> 1929. gads</span></div></div>";
    var customPopup_d_2 = "<div class='cont'><div class='row'><div class='col-7'><div class='text-center'><h5 class='card-title text-center'>Kapsētas ieejas vārti </h5><p class='card-text'>Sākotnējais nosaukums – Rīgas Jaunie kapi. 1925. gadā šajos kapos tika apglabātas dažādas personas, kuras nepiederēja pie nevienas draudzes. Oficiāli kapsētu atklāja 1929. gadā, kad tajā tika apglabāts latviešu dzejnieks Rainis (īstajā vārdā – Jānis Pliekšāns). Pēc tam kapsēta tika pārdēvēta par Raiņa kapiem.</p></div> </div><div class='col-md-5'><div class='atstarpe'><a href='./images/aizsaules_1a.jpg' target='_blank'><img class='d-block w-100 ' src='./images/aizsaules_1a.jpg' alt='Pirmais slaids'></a>  </div><div class='atstarpe'><a href='http://localhost:8080/Karte_simb/images/aizsaules_1a_2.jpg' target='_blank'><img class='d-block w-100 ' src='./images/aizsaules_1a_2.jpg' alt='Pirmais slaids'></a></div></div><div class='adrese'><img src='https://cdn3.iconfinder.com/data/icons/map-markers-1/512/residence-512.png' width='20'><span class='glyphicon glyphicon-envelope card-text font-weight-bold'> Aizsaules iela 1a    &nbsp </span><img src='https://cdn2.iconfinder.com/data/icons/picons-basic-1/57/basic1-011_calendar-512.png' width='20'><span class='glyphicon glyphicon-envelope card-text font-weight-bold'> 1929. gads</span></div></div></div>";
    // specify popup options 
    var customOptions =
        {
        'maxWidth': '400',
        'className' : 'custom'
        }
        var customOptions_d =
        {
        'maxWidth': '800',
        'className' : 'custom'
        }
        var customOptions_3 =
        {
        'maxWidth': '350',
        'className' : 'custom'
        }

     var credctrl = L.controlCredits({
            image: "./images/logo.png",
            link: "http://www.rpbv.lv/",
            text: "Rīgas pilsētas ģērboņu karte<br/>(c) Rīgas pilsētas būvvalde",
        }).addTo(map);

        var markers = L.markerClusterGroup();

var addressPoints = [
  //Aizsaules iela 1a
/* longitude ,latitude , Nosaukums, icona, apraksts, bilde_1, bilde_2, adrese, gads*/
  [56.982236, 24.149027, "Kapsētas ieejas vārti ", greenIcon, "Sākotnējais nosaukums – Rīgas Jaunie kapi. 1925. gadā šajos kapos tika apglabātas dažādas personas, kuras nepiederēja pie nevienas draudzes. Oficiāli kapsētu atklāja 1929. gadā, kad tajā tika apglabāts latviešu dzejnieks Rainis (īstajā vārdā – Jānis Pliekšāns). Pēc tam kapsēta tika pārdēvēta par Raiņa kapiem.", "aizsaules_1a", "aizsaules_1a_2", "Aizsaules iela 1a", "1929. gads"],


for (var i = 0; i < addressPoints.length; i++) {
  var a = addressPoints[i];
  var title = a[2];
   var customPopup_3 = "<div class='cont'><div class='row'><div class='col-7'><div class='text-center'><h5 class='card-title text-center'>"+a[2]+"</h5><p class='card-text'>"+a[4]+"</p></div><br /><div class='adrese'><img src='https://cdn3.iconfinder.com/data/icons/map-markers-1/512/residence-512.png' width='20'><span class='glyphicon glyphicon-envelope card-text font-weight-bold'>"+a[7]+"    &nbsp </span><img src='https://cdn2.iconfinder.com/data/icons/picons-basic-1/57/basic1-011_calendar-512.png' width='20'><span class='glyphicon glyphicon-envelope card-text font-weight-bold'>"+a[8]+"</span></div> </div><div class='col-md-5'><div class='atstarpe'><a href='./images/"+a[5]+".JPG' target='_blank'><img class='d-block w-100 ' height='87' src='./images/"+a[5]+".JPG' alt='Pirmais slaids'></a>  </div><div class='atstarpe'><a href='./images/"+a[6]+".JPG' target='_blank'><img class='d-block w-100 'height='87' src='./images/"+a[6]+".JPG' alt='Pirmais slaids'></a></div></div></div></div>";
     var marker = L.marker(new L.LatLng(a[0], a[1]), {
    title: title,
    icon: a[3]
  });
  marker.bindPopup(customPopup_3,customOptions);
  markers.addLayer(marker);
}
    map.addLayer(markers);

}

1 个答案:

答案 0 :(得分：0)

我设法通过在我的col-7，col-md-5和行类中添加flex: 1 0 auto;来解决此问题。

感谢支持的链接可以帮助您解决此问题-Flexbox and Internet Explorer 11 (display:flex in <html>?)

相关问题
最新问题