我在我的联系页面上使用Google地图作为标题图片，如下所示：www.tarmastersasphalt.com/contact.asp
我发现我的Google地图目前在任何IE浏览器版本中都无法正常运行。我正在努力解决这个问题，但与此同时，我需要快速解决这个问题。
编辑：任何人都可以通过提供以下方式来提供帮助：
if any IE Browser version
~ run this section of code
else
~ run this section of code
endif
CSS，Html或Javascript解决方案都可以
我编辑了这个问题，以帮助更准确地了解我正在寻找的内容。对于那些想要了解我的代码等更具体信息的人，请参阅以下内容：
~~~~~~~~~~原帖子信息如下~~~~~~~~~~
我只是想检查任何IE浏览器（无论什么版本），并跳过渲染这行代码：<div id="map" class="map img-responsive">（相反，我只是想显示地图区域的.jpg图像，以及在另一个窗口中转到谷歌地图的链接）
我可以通过足够容易地检查IE＆lt; 9来跳过代码，但是我在查找IE9，IE10和IE11（或任何未来版本）的方法时无法执行该部分。
我提供了代码部分，以及与此问题相关的关联js和css。
附件代码几乎可以获得我想要的结果... 除了 在IE 9+浏览器上查看时... 显示静态图像，但也显示在它下面的大空间，它也试图显示谷歌地图（它不适用于IE，所以是空白）。注意：我只有IE11浏览器进行测试，但我认为任何IE9 +版本都存在问题。
希望这足以向您展示我的问题，并让某人帮我找到解决方案。
总结一下：“我希望互动谷歌地图 ONLY 显示在屏幕尺寸大于768像素的所有非IE浏览器上。否则，我想要只显示静态地图jpg图像。（这意味着显示所有IE浏览器的静态图像，以及屏幕尺寸小于768px的所有非IE浏览器）“
$(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 -->
答案 0 :(得分：0)
Again, I was overthinking the problem. While I was waiting for an answer from this forum, I kept trying different suggetions I found on the web. It turns out that I was mostly there already with the script I had added:
<script type="text/javascript">
$(function() {
if( document["documentMode"] ) { // If Internet Explorer 10, 11
var cssClass = "ie" + document["documentMode"];
$('body').addClass(cssClass);
}
});
</script>
This script will create a class for whatever version of IE you have. So if you are using IE11, it will create a body.ie11 class that can be used in the css. If you are using IE10, it will create body.ie10, etc.
Since I wasn't sure if the above script would work on IE8 or IE9, I also used the HTML5 trick at the top of the page as follows:
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
which will also create a body.ie8 or body.ie9 class depending on which IE version you are using to view the page.
Then in my css I added the following:
.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;}
I'm sure there are more elegant ways to do this, but I wanted to keep it simple while I was trying things out.
Then in my html code, I changed it to this:
<!-- 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 -->
It now displays as I wanted in IE. The only thing I can't fix is the error I get when I view the page in IE:
Line: 98 Error: InvalidValueError: initMap is not a function
So it appears that IE is still trying to process some code about google maps. I did try to fix this by placing a display:hide class around all the map's JavaScripts like this:
<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>
But that didn't stop the error from displaying when viewing on IE browser.
If anyone has a suggestion on how to stop this error from displaying (I am testing on IE11), then kindly leave a comment.
Otherwise, I am happy to live with it.