我整天都在搜索这个话题但无济于事。我正在使用插件＆＃34; Twitter Bootstrap Hover Dropdown＆＃34;它使用data-hover属性。它在Firefox，Chrome和IE10中运行良好，但由于某种原因不会显示内容。当我将鼠标悬停在菜单项上时会显示外部阴影，但内容丢失。下面是左侧IE9和右侧Firefox的屏幕截图。 （旁注，IE10工作正常。）
我尝试使用的元标记<meta http-equiv="X-UA-Compatible" content="IE=10">并没有任何影响。
我还读到IE 9及以下版本在4095规则之后停止渲染样式表，因此我将bootstrap css分成两个不同的文件，但这并没有任何区别。我不知所措。我尝试更新我的引导程序文件，但它也没有做任何事情，只是在其他浏览器中打破了它。
任何想法都将不胜感激！
这是我的标题信息
<?php
$docRoot = $_SERVER['DOCUMENT_ROOT'];
require_once("config.php");
require_once("$docRoot/cart/cartfunctions.php");
// Set title meta tag
if (isset($forceTitle))
{
$metaTitle = $forceTitle;
} else {
$metaTitle = $title . $defaultTitle;
}
// Set keywords meta tag
$metaKeywords = $defaultKeywords . $keywords;
// Set description meta tag
$metaDescription = $description . " | " . $defaultDescription;
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><?php echo $metaTitle; ?></title>
<meta name="description" content="<?php echo $metaDescription; ?>" />
<meta name="keywords" content="<?php echo $metaKeywords; ?>" />
<!--For Responsive Design \/-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries \/ -->
<!-- [if lt IE9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--Bootstrap \/-->
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="/bootstrap/css/bootstrap2.css" rel="stylesheet" media="screen">
<link href="/bootstrap/css/bootstrap-theme.css" rel="stylesheet" media="screen">
<!--LightBox-->
<link rel="stylesheet" type="text/css" href="../lightbox/css/lightbox.css">
<!--Resets all CSS \/-->
<link href="/assets/css/reset.css" rel="stylesheet" type="text/css">
<!--Date Picker-->
<link href="/assets/css/datepicker.css" rel="stylesheet" type="text/css">
<!--Main Style Sheet Make all design style changes here \/-->
<link href="/assets/css/style.css" rel="stylesheet" type="text/css">
<!--For Flex Slider-->
<link href="/flex_slider2/flexslider.css" rel="stylesheet" type="text/css">
<!--Latest jQuery-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--LightBox JS-->
<script src="../lightbox/js/lightbox-2.6.min.js"></script>
<!--IE 9 Fix?-->
<script src="../assets/js/suckerfish.js"></script>
<!--For Flex Slider-->
<!-- Syntax Highlighter -->
<script type="text/javascript" src="/flex_slider2/js/shCore.js"></script>
<script type="text/javascript" src="/flex_slider2/js/shBrushXml.js"></script>
<script type="text/javascript" src="/flex_slider2/js/shBrushJScript.js"></script>
<!-- Optional FlexSlider Additions -->
<script src="/flex_slider2/js/jquery.easing.js"></script>
<script src="/flex_slider2/js/jquery.mousewheel.js"></script>
<script defer src="/flex_slider2/js/demo.js"></script>
<!--DatePicker-->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$('.datepicker').datepicker({
inline: true,
firstDay: 1,
showOtherMonths: true,
selectOtherMonths: true,
changeMonth:true,
changeYear:true,
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
showAnim: 'fadeIn',
dateFormat: "yy-mm-dd",
minDate:1
});
});
</script>
<!-- FlexSlider -->
<script src="/flex_slider2/jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('#main-slider').flexslider({
animation: "slide",
controlNav: false,
pausePlay: true,
start: function(slider){
$('body').removeClass('loading');
}
});
$('#secondary-slider').flexslider({
animation: "fade",
controlNav: false,
pausePlay: true,
start: function(slider){
$('body').removeClass('loading');
}
});
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 150,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "fade",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
}); /*Close window.load*/
</script>
<!--Google Maps-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDP-gTbGzJGWXo1nlMN5dc1jPW9daHYTJY&sensor=true"></script>
<script>
var map;
var myLatlng = new google.maps.LatLng(32.894273,-117.138464);
function initialize() {
var mapOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var contentString = '<div class="mapContent"'+
'<h3>Raphael\'s Party Rentals</h3>'+
'<br /><br />'+
'<p>8606 Miramar Road<br />'+
'San Diego, CA 92126</p>'+
'<p>(858) 689-7368</p>'+
'<br /><br />'+
'<a href="https://maps.google.com/maps?f=d&hl=en&view=map&geocode=%3BCbFmk0KbK4yyFZLr9QEdE5wE-SldlIkdzvjbgDH88IiX72STbg&time=&date=&ttype=&q=Raphael%27s+Party+Rentals+5850+El+Camino+Real,+Carlsbad,+CA+92008&ie=UTF8&om=1&cid=32892664,-117137789,7967823145950834940&s=AARTsJp1Sp8ZdTyV38qWiTsUbQvUsAp1Mw&ll=32.971228,-117.130737&spn=0.259226,0.30899&t=m&z=11&vpsrc=6&iwloc=A&daddr=Raphael%27s+Party+Rentals,+8606+Miramar+Road,+San+Diego,+CA+92126" target="_blank">Get Directions</a>'+
'</div>';
var infowindow = new google.maps.InfoWindow( {
content: contentString,
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Raphael\'s Party Rentals'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
这是我的页脚
<!--Necessary for Bootstrap-->
<!-- <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
--> <script src="/bootstrap/js/twitter-bootstrap-hover-dropdown.min.js"></script>
<script src="/bootstrap/js/bootstrap.js"></script>
<!--Pinterest Javascript-->
<script type="text/javascript">
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.setAttribute('data-pin-hover', true);
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f.parentNode.insertBefore(p, f);
}(document));
</script>
</body>
</html>
答案 0 :(得分：4)
我终于明白了。万一其他人遇到这个问题。在bootstrap-theme.css中，类.navbar有一个过滤器。对此进行评论，您的下拉菜单应该会显示出来。
.navbar {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#06489d), to(#053b80));
background-image: -webkit-linear-gradient(top, #064896, 0%, #053b80, 100%);
background-image: -moz-linear-gradient(top, #064896 0%, #053b80 100%);
background-image: linear-gradient(to bottom, #064896 0%, #053b80 100%);
background-repeat: repeat-x;
border-radius: 0px;
/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#064896', endColorstr='#053b80', GradientType=0);
*/ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
background-color:#053b80;