2

私は一日中このトピックを探していましたが、役に立ちませんでした。data-hover 属性を使用するプラグイン「Twitter Bootstrap Hover Dropdown」を使用しています。Firefox、Chrome、IE10 では問題なく動作しますが、何らかの理由で . メニュー項目にカーソルを合わせると外側の影が表示されますが、コンテンツがありません。以下は、左が IE9、右が Firefox のスクリーンショットです。(ちなみに、IE10は問題なく動作します。)

<meta http-equiv="X-UA-Compatible" content="IE=10">何の効果もないメタタグを使用してみました。

また、IE 9 以下は 4095 ルールの後にスタイルシートのレンダリングを停止することも読んだので、ブートストラップ css を 2 つの異なるファイルに分割しましたが、どちらも違いはありませんでした。私は途方に暮れています。ブートストラップ ファイルを更新しようとしましたが、それも何もせず、他のブラウザで壊れてしまいました。

どんな考えでも大歓迎です!

これは私のヘッダー情報です

    <?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‎&lt;/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>
4

1 に答える 1

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;
于 2013-10-31T21:33:02.340 に答える