如果在任何 IE 浏览器中查看，如何防止一段代码（Google 地图）被执行
How to keep a section of code (Google Maps) from being executed if viewed within any IE browser
我在联系页面上使用 Google 地图作为 header 图片，如下所示：www.tarmastersasphalt.com/contact.asp
我发现我的 Google 地图目前无法在任何 IE 浏览器版本中正常运行。我正在努力解决这个问题，但与此同时，我需要快速 work-around。
编辑： 任何人都可以通过提供一种方法来执行以下操作来提供帮助：
if any IE Browser version
~ run this section of code
else
~ run this section of code
endif
CSS、Html 或 Javascript 解决方案都可以
我编辑了这个问题，以帮助更准确地找到我正在寻找的内容。对于那些想要有关我的代码等的更多具体信息的人，请参见下文：
~~~~~~~~~~ 原文post 信息如下~~~~~~~~~~
我只想检查任何 IE 浏览器（无论什么版本），并跳过渲染这行代码：<div id="map" class="map img-responsive">（相反，我只想显示一个 .jpg 图像地图区域，和一个link去另一个window)
中的google地图
我可以通过检查 IE<9 来跳过代码，但是我在寻找一种方法来检查 IE9、IE10 和 IE11（或任何未来版本）不执行该部分时遇到问题。
我已经提供了与此问题相关的代码部分，以及相关的 js 和 css。
附加的代码几乎得到了我想要的结果... 除了 在 IE 9+ 浏览器上查看时.. 它 确实显示静态图像，但也在其下方显示大space，它还试图显示Google地图（在 IE 上不起作用，因此为空白）。注意：我只有一个 IE11 浏览器来测试 wtih，但我假设这个问题存在于任何 IE9+ 版本。
希望这足以向您展示我的问题，并能帮助我找到解决方案。
总结一下： "I want the Interactive Google Map to ONLY display on all non-IE browsers with a screen size larger than 768px. Otherwise, I want to just display a static map jpg image. (This means displaying a static image for ALL IE browsers, and for all non-IE browsers that have a screen size smaller than 768px)"
$(function() {
if( document["documentMode"] ) { // If Internet Explorer 10, 11
var cssClass = "ie" + document["documentMode"];
$('body').addClass(cssClass);
}
});
var GoogleMap = function () {
var panorama1, panorama2;
// Return
return {
//Basic Map
initGoogleMap: function () {
/* Map */
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 38.9823426, lng: -94.1994833},
scrollwheel: false,
zoom: 12
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">TarMasters</h1>'+
'<div id="bodyContent">'+
'<p><b>Full Service Asphalt Company</b><br />' +
'1426 State Hwy TT<br />' +
'Bates City, MO 64011</p>'+
'<p><b>816-721-1699</b></p>'+
'<p><b><a target="_blank"'+
'href="https://www.google.com/maps/place/Tarmasters/@38.9562579,-94.1057286,17z/data=!4m13!1m7!3m6!1s0x87c11502459d838b:0xadf0c711b5a89c2a!2s1426+State+Hwy+TT,+Bates+City,+MO+64011!3b1!8m2!3d38.9562537!4d-94.1035399!3m4!1s0x87c114d959319059:0xe4aadbe9019acd6f!8m2!3d38.9562515!4d-94.1035216">'+
'<span> View on Google Maps </span> </a></b></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: {lat: 38.9562579, lng: -94.1057286},
label: {
text: 'Tarmasters',
color: '#820000',
fontSize: "10px"
},
title: 'TarMasters - full service asphalt company'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
},
// End Basic Map
// Basic Panorama Map 1
initPanorama1: function () {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano1'),
{
position: {lat: 40.748866, lng: -73.988366},
pov: {heading: 165, pitch: 0},
zoom: 1
}
);
},
// End Basic Panorama Map 1
// Basic Panorama Map 2
initPanorama2: function () {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano2'),
{
position: {lat: 42.345573, lng: -71.098326},
pov: {heading: 165, pitch: 0},
zoom: 1
}
);
},
// End Basic Panorama Map 2
};
// End Return
}();
// Google Map
function initMap() {
GoogleMap.initGoogleMap();
}
.ie-dependant {
display:none;
}
body.ie11 .ie-dependant.ie11 {
display: block;
}
body.ie10 .ie-dependant.ie10 {
display: block;
}
@media (min-width: 768px) {
.hidelg2 {
display: none !important;
}
}
@media (max-width: 768px) {
.hidesm2 {
display: none !important;
}
}
.centersomething {
text-align: center;
margin: 0px auto; /*Center container on page */
float: none;
}
.im-centered {
margin-left: auto;
margin-right: auto;
padding-left: 0px !important;
padding-right: 0px !important;
float: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=AIzaSyAWR4lerRuEliCpkQtVlProdv-B_XrG6VM&callback=initMap" async defer></script>
<!-- Google Map -->
<!-- this next section displays static map jpg image for IE 8 and less -->
<!--[if lt IE 9]>
<a href="https://www.google.com/maps/place/Tarmasters/@38.9562579,-94.1057286,17z/data=!4m13!1m7!3m6!1s0x87c11502459d838b:0xadf0c711b5a89c2a!2s1426+State+Hwy+TT,+Bates+City,+MO+64011!3b1!8m2!3d38.9562537!4d-94.1035399!3m4!1s0x87c114d959319059:0xe4aadbe9019acd6f!8m2!3d38.9562515!4d-94.1035216" target="_blank" title="TarMasters - full service asphalt company. Click to go to Google Maps">
<img class="im-centered img-responsive" src="http://www.tarmastersasphalt.com/images/google_map-new.jpg" alt="TarMasters - full service asphalt company. Click to go to Google Maps" title="TarMasters - full service asphalt company. Click to go to Google Maps">
</a>
<![endif]-->
<!--[if gte IE 9]><!-->
<!-- everything after this section is being rendered for all non-IE browsers and IE browsers 9 and above -->
<!-- this next <div> section displays the static map jpg image for IE 10 and 11 -->
<div class="ie-dependant ie10 ie11">
<a
href="https://www.google.com/maps/place/Tarmasters/@38.9562579,-94.1057286,17z/data=!4m13!1m7!3m6!1s0x87c11502459d838b:0xadf0c711b5a89c2a!2s1426+State+Hwy+TT,+Bates+City,+MO+64011!3b1!8m2!3d38.9562537!4d-94.1035399!3m4!1s0x87c114d959319059:0xe4aadbe9019acd6f!8m2!3d38.9562515!4d-94.1035216" target="_blank" title="TarMasters - full service asphalt company. Click to go to Google Maps">
<img class="img-responsive centersomething im-centered" align="center" src="http://www.tarmastersasphalt.com/images/google_map-new.jpg" alt="TarMasters - full service asphalt company. Click to go to Google Maps" title="TarMasters - full service asphalt company. Click to go to Google Maps">
</a>
</div>
<!-- this next <div> section displays the interactive google map for all non-IE browsers (and IE >9 -unfortunatly) if the window size is wider than 768px. ***Note this is the section I would like to have hidden to all IE browsers, but can't seem to find a way to do so for IE >9) -->
<div class="hidesm2">
<div id="map" class="map img-responsive">
</div><!---/map-->
</div><!---/hidesm2-->
<!-- this next <div> section displays the static map jpg image for all non-IE browsers (and IE >9) if the window size is less than 768px. -->
<div class="hidelg2">
<a
href="https://www.google.com/maps/place/Tarmasters/@38.9562579,-94.1057286,17z/data=!4m13!1m7!3m6!1s0x87c11502459d838b:0xadf0c711b5a89c2a!2s1426+State+Hwy+TT,+Bates+City,+MO+64011!3b1!8m2!3d38.9562537!4d-94.1035399!3m4!1s0x87c114d959319059:0xe4aadbe9019acd6f!8m2!3d38.9562515!4d-94.1035216" target="_blank" title="TarMasters - full service asphalt company. Click to go to Google Maps">
<img class="img-responsive" src="http://www.tarmastersasphalt.com/images/google_map-new.jpg" alt="TarMasters - full service asphalt company. Click to go to Google Maps" title="TarMasters - full service asphalt company. Click to go to Google Maps">
</a>
</div><!---/hidelg2-->
<!--<![endif]-->
<!-- End Google Map -->
再次，我想多了这个问题。当我在等待这个论坛的答案时，我一直在尝试我在网上找到的不同建议。事实证明，我添加的脚本基本上已经在那里了：
<script type="text/javascript">
$(function() {
if( document["documentMode"] ) { // If Internet Explorer 10, 11
var cssClass = "ie" + document["documentMode"];
$('body').addClass(cssClass);
}
});
</script>
此脚本将为您拥有的任何版本的 IE 创建 class。所以如果你使用的是 IE11，它会创建一个 body.ie11 class 可以在 css 中使用。如果你使用的是IE10，它会创建body.ie10等
由于我不确定上面的脚本是否适用于 IE8 或 IE9，所以我还在页面顶部使用了 HTML5 技巧，如下所示：
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
这还将创建一个 body.ie8 或 body.ie9 class，具体取决于您用来查看页面的 IE 版本。
然后在我的 css 中添加了以下内容：
.ie-dependant {display:none;} /* this hides the code from non-IE browsers */
body.ie8 .showie8 {display:block;}
body.ie9 .showie9 {display:block;}
body.ie10 .showie10 {display:block;}
body.ie11 .showie11 {display:block;}
body.ie8 .hideie8 {display:none;}
body.ie9 .hideie9 {display:none;}
body.ie10 .hideie10 {display:none;}
body.ie11 .hideie11 {display:none;}
我确信有更优雅的方法可以做到这一点，但我想在尝试时保持简单。
然后在我的 html 代码中，我将其更改为：
<!-- Google Map -->
<!--[if lt IE 9]>
<a href="https://www.google.com/maps/place/Tarmasters/@38.9562579,-94.1057286,17z/data=!4m13!1m7!3m6!1s0x87c11502459d838b:0xadf0c711b5a89c2a!2s1426+State+Hwy+TT,+Bates+City,+MO+64011!3b1!8m2!3d38.9562537!4d-94.1035399!3m4!1s0x87c114d959319059:0xe4aadbe9019acd6f!8m2!3d38.9562515!4d-94.1035216" target="_blank" title="TarMasters - full service asphalt company. Click to go to Google Maps">
<img class="im-centered img-responsive" src="images/google_map-new.jpg" alt="TarMasters - full service asphalt company. Click to go to Google Maps" title="TarMasters - full service asphalt company. Click to go to Google Maps">
</a>
<![endif]-->
<!--[if gte IE 9]><!-->
<div class="ie-dependant showie9 showie10 showie11">
<a href="https://www.google.com/maps/place/Tarmasters/@38.9562579,-94.1057286,17z/data=!4m13!1m7!3m6!1s0x87c11502459d838b:0xadf0c711b5a89c2a!2s1426+State+Hwy+TT,+Bates+City,+MO+64011!3b1!8m2!3d38.9562537!4d-94.1035399!3m4!1s0x87c114d959319059:0xe4aadbe9019acd6f!8m2!3d38.9562515!4d-94.1035216" target="_blank" title="TarMasters - full service asphalt company. Click to go to Google Maps">
<img class="img-responsive centersomething im-centered" align="center" src="images/google_map-new.jpg" alt="TarMasters - full service asphalt company. Click to go to Google Maps" title="TarMasters - full service asphalt company. Click to go to Google Maps">
</a>
</div>
<div class="hideie9 hideie10 hideie11">
<div class="hidesm2">
<div id="map" class="map img-responsive">
</div><!---/map-->
</div><!---/hidesm2-->
<div class="hidelg2">
<a href="https://www.google.com/maps/place/Tarmasters/@38.9562579,-94.1057286,17z/data=!4m13!1m7!3m6!1s0x87c11502459d838b:0xadf0c711b5a89c2a!2s1426+State+Hwy+TT,+Bates+City,+MO+64011!3b1!8m2!3d38.9562537!4d-94.1035399!3m4!1s0x87c114d959319059:0xe4aadbe9019acd6f!8m2!3d38.9562515!4d-94.1035216" target="_blank" title="TarMasters - full service asphalt company. Click to go to Google Maps">
<img class="img-responsive" src="images/google_map-new.jpg" alt="TarMasters - full service asphalt company. Click to go to Google Maps" title="TarMasters - full service asphalt company. Click to go to Google Maps">
</a>
</div><!---/hidelg2-->
</div>
<!--<![endif]-->
<!-- End Google Map -->
它现在在 IE 中显示为我想要的。我唯一无法修复的是在 IE 中查看页面时出现的错误：
Line: 98 Error: InvalidValueError: initMap is not a function
看来 IE 仍在尝试处理一些关于 google 地图的代码。我确实尝试通过在所有地图的 JavaScript 周围放置 display:hide class 来解决此问题，如下所示：
<div class="hideie8 hideie9 hideie10 hideie11">
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=mykeyhere&callback=initMap" async defer></script>
<script type="text/javascript" src="assets/js/plugins/google-map.js"> </script>
<script type="text/javascript">
// Google Map
function initMap() {
GoogleMap.initGoogleMap();
}
</script>
</div>
但这并没有阻止在 IE 浏览器上查看时显示错误。
如果有人对如何停止显示此错误有建议（我在 IE11 上测试），请发表评论。
否则，我很乐意忍受它。
我在联系页面上使用 Google 地图作为 header 图片，如下所示：www.tarmastersasphalt.com/contact.asp
我发现我的 Google 地图目前无法在任何 IE 浏览器版本中正常运行。我正在努力解决这个问题，但与此同时，我需要快速 work-around。
编辑： 任何人都可以通过提供一种方法来执行以下操作来提供帮助：
if any IE Browser version
~ run this section of code
else
~ run this section of code
endif
CSS、Html 或 Javascript 解决方案都可以
我编辑了这个问题，以帮助更准确地找到我正在寻找的内容。对于那些想要有关我的代码等的更多具体信息的人，请参见下文：
~~~~~~~~~~ 原文post 信息如下~~~~~~~~~~
我只想检查任何 IE 浏览器（无论什么版本），并跳过渲染这行代码：<div id="map" class="map img-responsive">（相反，我只想显示一个 .jpg 图像地图区域，和一个link去另一个window)
我可以通过检查 IE<9 来跳过代码，但是我在寻找一种方法来检查 IE9、IE10 和 IE11（或任何未来版本）不执行该部分时遇到问题。
我已经提供了与此问题相关的代码部分，以及相关的 js 和 css。
附加的代码几乎得到了我想要的结果... 除了 在 IE 9+ 浏览器上查看时.. 它 确实显示静态图像，但也在其下方显示大space，它还试图显示Google地图（在 IE 上不起作用，因此为空白）。注意：我只有一个 IE11 浏览器来测试 wtih，但我假设这个问题存在于任何 IE9+ 版本。
希望这足以向您展示我的问题，并能帮助我找到解决方案。
总结一下： "I want the Interactive Google Map to ONLY display on all non-IE browsers with a screen size larger than 768px. Otherwise, I want to just display a static map jpg image. (This means displaying a static image for ALL IE browsers, and for all non-IE browsers that have a screen size smaller than 768px)"
$(function() {
if( document["documentMode"] ) { // If Internet Explorer 10, 11
var cssClass = "ie" + document["documentMode"];
$('body').addClass(cssClass);
}
});
var GoogleMap = function () {
var panorama1, panorama2;
// Return
return {
//Basic Map
initGoogleMap: function () {
/* Map */
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 38.9823426, lng: -94.1994833},
scrollwheel: false,
zoom: 12
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">TarMasters</h1>'+
'<div id="bodyContent">'+
'<p><b>Full Service Asphalt Company</b><br />' +
'1426 State Hwy TT<br />' +
'Bates City, MO 64011</p>'+
'<p><b>816-721-1699</b></p>'+
'<p><b><a target="_blank"'+
'href="https://www.google.com/maps/place/Tarmasters/@38.9562579,-94.1057286,17z/data=!4m13!1m7!3m6!1s0x87c11502459d838b:0xadf0c711b5a89c2a!2s1426+State+Hwy+TT,+Bates+City,+MO+64011!3b1!8m2!3d38.9562537!4d-94.1035399!3m4!1s0x87c114d959319059:0xe4aadbe9019acd6f!8m2!3d38.9562515!4d-94.1035216">'+
'<span> View on Google Maps </span> </a></b></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: {lat: 38.9562579, lng: -94.1057286},
label: {
text: 'Tarmasters',
color: '#820000',
fontSize: "10px"
},
title: 'TarMasters - full service asphalt company'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
},
// End Basic Map
// Basic Panorama Map 1
initPanorama1: function () {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano1'),
{
position: {lat: 40.748866, lng: -73.988366},
pov: {heading: 165, pitch: 0},
zoom: 1
}
);
},
// End Basic Panorama Map 1
// Basic Panorama Map 2
initPanorama2: function () {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano2'),
{
position: {lat: 42.345573, lng: -71.098326},
pov: {heading: 165, pitch: 0},
zoom: 1
}
);
},
// End Basic Panorama Map 2
};
// End Return
}();
// Google Map
function initMap() {
GoogleMap.initGoogleMap();
}
.ie-dependant {
display:none;
}
body.ie11 .ie-dependant.ie11 {
display: block;
}
body.ie10 .ie-dependant.ie10 {
display: block;
}
@media (min-width: 768px) {
.hidelg2 {
display: none !important;
}
}
@media (max-width: 768px) {
.hidesm2 {
display: none !important;
}
}
.centersomething {
text-align: center;
margin: 0px auto; /*Center container on page */
float: none;
}
.im-centered {
margin-left: auto;
margin-right: auto;
padding-left: 0px !important;
padding-right: 0px !important;
float: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=AIzaSyAWR4lerRuEliCpkQtVlProdv-B_XrG6VM&callback=initMap" async defer></script>
<!-- Google Map -->
<!-- this next section displays static map jpg image for IE 8 and less -->
<!--[if lt IE 9]>
<a href="https://www.google.com/maps/place/Tarmasters/@38.9562579,-94.1057286,17z/data=!4m13!1m7!3m6!1s0x87c11502459d838b:0xadf0c711b5a89c2a!2s1426+State+Hwy+TT,+Bates+City,+MO+64011!3b1!8m2!3d38.9562537!4d-94.1035399!3m4!1s0x87c114d959319059:0xe4aadbe9019acd6f!8m2!3d38.9562515!4d-94.1035216" target="_blank" title="TarMasters - full service asphalt company. Click to go to Google Maps">
<img class="im-centered img-responsive" src="http://www.tarmastersasphalt.com/images/google_map-new.jpg" alt="TarMasters - full service asphalt company. Click to go to Google Maps" title="TarMasters - full service asphalt company. Click to go to Google Maps">
</a>
<![endif]-->
<!--[if gte IE 9]><!-->
<!-- everything after this section is being rendered for all non-IE browsers and IE browsers 9 and above -->
<!-- this next <div> section displays the static map jpg image for IE 10 and 11 -->
<div class="ie-dependant ie10 ie11">
<a
href="https://www.google.com/maps/place/Tarmasters/@38.9562579,-94.1057286,17z/data=!4m13!1m7!3m6!1s0x87c11502459d838b:0xadf0c711b5a89c2a!2s1426+State+Hwy+TT,+Bates+City,+MO+64011!3b1!8m2!3d38.9562537!4d-94.1035399!3m4!1s0x87c114d959319059:0xe4aadbe9019acd6f!8m2!3d38.9562515!4d-94.1035216" target="_blank" title="TarMasters - full service asphalt company. Click to go to Google Maps">
<img class="img-responsive centersomething im-centered" align="center" src="http://www.tarmastersasphalt.com/images/google_map-new.jpg" alt="TarMasters - full service asphalt company. Click to go to Google Maps" title="TarMasters - full service asphalt company. Click to go to Google Maps">
</a>
</div>
<!-- this next <div> section displays the interactive google map for all non-IE browsers (and IE >9 -unfortunatly) if the window size is wider than 768px. ***Note this is the section I would like to have hidden to all IE browsers, but can't seem to find a way to do so for IE >9) -->
<div class="hidesm2">
<div id="map" class="map img-responsive">
</div><!---/map-->
</div><!---/hidesm2-->
<!-- this next <div> section displays the static map jpg image for all non-IE browsers (and IE >9) if the window size is less than 768px. -->
<div class="hidelg2">
<a
href="https://www.google.com/maps/place/Tarmasters/@38.9562579,-94.1057286,17z/data=!4m13!1m7!3m6!1s0x87c11502459d838b:0xadf0c711b5a89c2a!2s1426+State+Hwy+TT,+Bates+City,+MO+64011!3b1!8m2!3d38.9562537!4d-94.1035399!3m4!1s0x87c114d959319059:0xe4aadbe9019acd6f!8m2!3d38.9562515!4d-94.1035216" target="_blank" title="TarMasters - full service asphalt company. Click to go to Google Maps">
<img class="img-responsive" src="http://www.tarmastersasphalt.com/images/google_map-new.jpg" alt="TarMasters - full service asphalt company. Click to go to Google Maps" title="TarMasters - full service asphalt company. Click to go to Google Maps">
</a>
</div><!---/hidelg2-->
<!--<![endif]-->
<!-- End Google Map -->
再次，我想多了这个问题。当我在等待这个论坛的答案时，我一直在尝试我在网上找到的不同建议。事实证明，我添加的脚本基本上已经在那里了：
<script type="text/javascript">
$(function() {
if( document["documentMode"] ) { // If Internet Explorer 10, 11
var cssClass = "ie" + document["documentMode"];
$('body').addClass(cssClass);
}
});
</script>
此脚本将为您拥有的任何版本的 IE 创建 class。所以如果你使用的是 IE11，它会创建一个 body.ie11 class 可以在 css 中使用。如果你使用的是IE10，它会创建body.ie10等
由于我不确定上面的脚本是否适用于 IE8 或 IE9，所以我还在页面顶部使用了 HTML5 技巧，如下所示：
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
这还将创建一个 body.ie8 或 body.ie9 class，具体取决于您用来查看页面的 IE 版本。
然后在我的 css 中添加了以下内容：
.ie-dependant {display:none;} /* this hides the code from non-IE browsers */
body.ie8 .showie8 {display:block;}
body.ie9 .showie9 {display:block;}
body.ie10 .showie10 {display:block;}
body.ie11 .showie11 {display:block;}
body.ie8 .hideie8 {display:none;}
body.ie9 .hideie9 {display:none;}
body.ie10 .hideie10 {display:none;}
body.ie11 .hideie11 {display:none;}
我确信有更优雅的方法可以做到这一点，但我想在尝试时保持简单。
然后在我的 html 代码中，我将其更改为：
<!-- Google Map -->
<!--[if lt IE 9]>
<a href="https://www.google.com/maps/place/Tarmasters/@38.9562579,-94.1057286,17z/data=!4m13!1m7!3m6!1s0x87c11502459d838b:0xadf0c711b5a89c2a!2s1426+State+Hwy+TT,+Bates+City,+MO+64011!3b1!8m2!3d38.9562537!4d-94.1035399!3m4!1s0x87c114d959319059:0xe4aadbe9019acd6f!8m2!3d38.9562515!4d-94.1035216" target="_blank" title="TarMasters - full service asphalt company. Click to go to Google Maps">
<img class="im-centered img-responsive" src="images/google_map-new.jpg" alt="TarMasters - full service asphalt company. Click to go to Google Maps" title="TarMasters - full service asphalt company. Click to go to Google Maps">
</a>
<![endif]-->
<!--[if gte IE 9]><!-->
<div class="ie-dependant showie9 showie10 showie11">
<a href="https://www.google.com/maps/place/Tarmasters/@38.9562579,-94.1057286,17z/data=!4m13!1m7!3m6!1s0x87c11502459d838b:0xadf0c711b5a89c2a!2s1426+State+Hwy+TT,+Bates+City,+MO+64011!3b1!8m2!3d38.9562537!4d-94.1035399!3m4!1s0x87c114d959319059:0xe4aadbe9019acd6f!8m2!3d38.9562515!4d-94.1035216" target="_blank" title="TarMasters - full service asphalt company. Click to go to Google Maps">
<img class="img-responsive centersomething im-centered" align="center" src="images/google_map-new.jpg" alt="TarMasters - full service asphalt company. Click to go to Google Maps" title="TarMasters - full service asphalt company. Click to go to Google Maps">
</a>
</div>
<div class="hideie9 hideie10 hideie11">
<div class="hidesm2">
<div id="map" class="map img-responsive">
</div><!---/map-->
</div><!---/hidesm2-->
<div class="hidelg2">
<a href="https://www.google.com/maps/place/Tarmasters/@38.9562579,-94.1057286,17z/data=!4m13!1m7!3m6!1s0x87c11502459d838b:0xadf0c711b5a89c2a!2s1426+State+Hwy+TT,+Bates+City,+MO+64011!3b1!8m2!3d38.9562537!4d-94.1035399!3m4!1s0x87c114d959319059:0xe4aadbe9019acd6f!8m2!3d38.9562515!4d-94.1035216" target="_blank" title="TarMasters - full service asphalt company. Click to go to Google Maps">
<img class="img-responsive" src="images/google_map-new.jpg" alt="TarMasters - full service asphalt company. Click to go to Google Maps" title="TarMasters - full service asphalt company. Click to go to Google Maps">
</a>
</div><!---/hidelg2-->
</div>
<!--<![endif]-->
<!-- End Google Map -->
它现在在 IE 中显示为我想要的。我唯一无法修复的是在 IE 中查看页面时出现的错误：
Line: 98 Error: InvalidValueError: initMap is not a function
看来 IE 仍在尝试处理一些关于 google 地图的代码。我确实尝试通过在所有地图的 JavaScript 周围放置 display:hide class 来解决此问题，如下所示：
<div class="hideie8 hideie9 hideie10 hideie11">
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=mykeyhere&callback=initMap" async defer></script>
<script type="text/javascript" src="assets/js/plugins/google-map.js"> </script>
<script type="text/javascript">
// Google Map
function initMap() {
GoogleMap.initGoogleMap();
}
</script>
</div>
但这并没有阻止在 IE 浏览器上查看时显示错误。
如果有人对如何停止显示此错误有建议（我在 IE11 上测试），请发表评论。
否则，我很乐意忍受它。