1
我在使用IE 9-10和Firefox的Twitter Bootstrap菜單時遇到問題。在演示鏈接中，當鼠標懸停在菜單項上時，您會看到它們完全消失和/或閃爍。下拉菜單也被定位錯誤。在IE和FF中的twitter引導菜單閃爍和錯誤的位置
我在Chrome中沒有看到任何問題，但IE 9-10有最明顯的問題。 Firefox有閃爍和下拉定位問題，但它似乎沒有IE那麼糟糕。
有人可以給我一些建議嗎？
演示：從IE檢查http://codepen.io/maxwbailey/pen/envjd
HTML：
<DIV class=navbar>
<DIV class=navbar-inner>
<DIV class=container><A class=brand href="http://google.com">Test</A>
<nav class=nav-main role=navigation>
<UL class="nav l_tinynav1" id=primary_navigation>
<LI class=menu-about><A href="http://google.com">About</A></LI>
<LI class="active dropdown menu-pages"><A class=dropdown-toggle href="#" data-target="#">Pages<B class=caret></B></A>
<UL class=dropdown-menu>
<LI class=menu-blog><A href="http://google.com">Link1</A></LI>
<LI class="active menu-home"><A href="http://google.com">Link2</A></LI>
<LI class=menu-page-comments><A href="http://google.com">Link3</A></LI>
<LI class=menu-page-markup-and-formatting><A href="http://google.com">Link4</A></LI>
</UL>
</LI>
<LI class="dropdown menu-depth"><A class=dropdown-toggle href="#" data-target="#">Link5<B class=caret></B></A>
<UL class=dropdown-menu>
<LI class="dropdown-submenu menu-level-01"><A href="#">Level 01</A>
<UL class=dropdown-menu>
<LI class=menu-level-02><A href="#">Level 02</A></LI>
</UL>
</LI>
</UL>
</LI>
</nav>
</DIV>
</DIV>
CSS：
.navbar {
margin-bottom: 0;
}
.navbar-inner {
background-color: #FFF;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-repeat: no-repeat;
filter: none;
}
.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-width: 0;
}
/* Mobile nav desktop mode */
.tinynav { display: none }
@media (min-width: 980px) {
.navbar .brand {
padding: 24px 20px 10px;
}
.navbar .nav>li {
line-height: 40px;
}
.navbar .nav>li>a {
text-shadow: none;
}
.navbar .nav .dropdown-toggle .caret {
margin-top: 18px;
}
.nav-main>ul>li>a, .nav-main>ul>li>a:hover {
border-top: 5px solid transparent;
}
.nav-main .active a, .nav-main>ul>li>a:hover, .nav-main ul li:hover>a, .dropdown.open a {
border-top-color: #FFA500;
}
.navbar .nav li.dropdown.open>.dropdown-toggle, .navbar .nav li.dropdown.active>.dropdown-toggle, .navbar .nav li.dropdown.open.active>.dropdown-toggle, .navbar .nav>.active>a, .navbar .nav>.active>a:hover, .navbar .nav>.active>a:focus {
background-color: inherit;
}
/*Make menu drop on hover*/
ul.nav li.dropdown:hover > ul.dropdown-menu{
display: block;
}
.nav>li>a:hover {
display: none;
}
/* Remove arrow from top nav dropdown */
.navbar .nav > li > .dropdown-menu:after, .navbar .nav > li > .dropdown-menu:before {
content: none;
}
.dropdown-menu {
margin: 0;
border-top: 0;
border-radius: 0;
}
.dropdown-submenu > .dropdown-menu {
border-radius: 0;
}
.dropdown-menu {
padding: 0;
}
.dropdown-menu > li > a {
padding:8px 12px;
}
.dropdown-submenu > .dropdown-menu {
margin-top: 0;
}
}
@media (max-width: 980px) {
/* Mobile nav */
.nav-main {
position: relative;
}
.tinynav {
display: block;
margin-top: 5px;
position: absolute;
right: 0;
}
.navbar .nav {
display: none;
}
/* End Mobile nav */
} /* END (max-width: 980px) */
JS：
/*! http://tinynav.viljamis.com v1.1 by @viljamis */
(function ($, window, i) {
"use strict";
$.fn.tinyNav = function (options) {
// Default settings
var settings = $.extend({
'active' : 'active', // String: Set the "active" class
'header' : '', // String: Specify text for "header" and show header instead of the active item
'label' : '' // String: sets the <label> text for the <select> (if not set, no label will be added)
}, options);
return this.each(function() {
// Used for namespacing
i++;
var $nav = $(this),
// Namespacing
namespace = 'tinynav',
namespace_i = namespace + i,
l_namespace_i = '.l_' + namespace_i,
$select = $('<select/>').attr("id", namespace_i).addClass(namespace + ' ' + namespace_i);
if ($nav.is('ul,ol')) {
if (settings.header !== '') {
$select.append(
$('<option/>').text(settings.header)
);
}
// Build options
var options = '';
$nav
.addClass('l_' + namespace_i)
.find('a')
.each(function() {
options += '<option value="' + $(this).attr('href') + '">';
var j;
for (j = 0; j < $(this).parents('ul, ol').length - 1; j++) {
options += '- ';
}
options += $(this).text() + '</option>';
});
// Append options into a select
$select.append(options);
// Select the active item
if (!settings.header) {
$select
.find(':eq(' + $(l_namespace_i + ' li')
.index($(l_namespace_i + ' li.' + settings.active)) + ')')
.attr('selected', true);
}
// Change window location
$select.change(function() {
window.location.href = $(this).val();
});
// Inject select
$(l_namespace_i).after($select);
// Inject label
if (settings.label) {
$select.before(
$("<label/>")
.attr("for", namespace_i)
.addClass(namespace + '_label ' + namespace_i + '_label')
.append(settings.label)
);
}
}
});
};
})(jQuery, this, 0);
jQuery(function() {
"use strict";
jQuery("#primary_navigation").tinyNav();
});