私は一日中このトピックを探していましたが、役に立ちませんでした。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</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>