2013-10-30 67 views
2

我一直在搜索這個話題整天無濟於事。我正在使用使用數據懸停屬性的插件「Twitter Bootstrap Hover Dropdown」。它適用於Firefox,Chrome和IE10,但出於某種原因不會顯示該內容。當我將鼠標懸停在菜單項上時,出現陰影陰影,但內容丟失。以下是左側IE9和右側Firefox的截圖。 (注意,IE10的工作原理很好。)下拉不顯示與IE 9 - Twitter Bootstrap懸停下拉

我試過使用元標記<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;