Twitter bootstrap 下拉列表未与IE 9一起显示-Twitter引导悬停下拉列表
我整天都在寻找这个话题，但毫无结果。我正在使用插件“Twitter引导悬停下拉列表”，它使用数据悬停属性。它在Firefox、Chrome和IE10中工作得很好，但由于某些原因，它不会显示浏览器的内容。当我将鼠标悬停在菜单项上时，outter阴影会出现，但内容丢失。下面是左侧IE9和右侧Firefox的屏幕截图。（旁注，IE10工作正常。） 我试过使用meta标记Twitter bootstrap 下拉列表未与IE 9一起显示-Twitter引导悬停下拉列表,twitter-bootstrap,Twitter Bootstrap,我整天都在寻找这个话题，但毫无结果。我正在使用插件“Twitter引导悬停下拉列表”，它使用数据悬停属性。它在Firefox、Chrome和IE10中工作得很好，但由于某些原因，它不会显示浏览器的内容。当我将鼠标悬停在菜单项上时，outter阴影会出现，但内容丢失。下面是左侧IE9和右侧Firefox的屏幕截图。（旁注，IE10工作正常。） 我试过使用meta标记，但它没有任何效果 我还读到IE9及以下版本在4095规则之后停止呈现样式表，所以我将引导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>
$（函数（）{
$（'.datepicker'）.datepicker({
是的，
第一天：1，
showOtherMonths：是的，
选择OtherMonths:true，
变化月：对，
变化年：是的，
dayNamesMin:[“太阳”、“星期一”、“星期二”、“星期三”、“星期四”、“星期五”、“星期六”]，
showAnim:“fadeIn”，
日期格式：“年月日”，
minDate:1
});
});
$（函数（）{
SyntaxHighlighter.all（）；
});
$（窗口）。加载（函数（）{
$（“#主滑块”）.flexslider({
动画：“幻灯片”，
控制导航：错误，
波塞普拉：没错，
开始：功能（滑块）{
$（'body'）.removeClass（'loading'）；
}
});
$（“#辅助滑块”）.flexslider({
动画：“淡入淡出”，
控制导航：错误，
波塞普拉：没错，
开始：功能（滑块）{
$（'body'）.removeClass（'loading'）；
}
});
$（'旋转木马'）.flexslider({
动画：“幻灯片”，
控制导航：错误，
animationLoop:false，
幻灯片放映：错误，
项目宽度：150，
项目保证金：5，
asNavFor:“#滑块”
});
$（“#滑块”）.flexslider({
动画：“淡入淡出”，
控制导航：错误，
animationLoop:false，
幻灯片放映：错误，
同步：“旋转木马”
});
}); /*关闭窗口。加载*/
var映射；
var mylatng=new google.maps.LatLng（32.894273，-117.138464）；
函数初始化（）{
变量映射选项={
缩放：14，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
var contentString='我终于找到了答案。万一其他人遇到这个问题。在bootstrap-theme.css中，class.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;
我终于找到了答案。万一其他人遇到这个问题。在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;
截图在哪里？截图在哪里？