在问这个问题之前，我想描述一下我要解决的问题。
我有一个用引导程序制作的页面
http://inants.com/kadmos/web/kad/bootres/ji/break.html
需要这样做，以便当浏览器页面调整我用于左侧菜单的引导左侧选项卡（屏幕截图的左侧部分）时变成引导折叠菜单（屏幕截图的右侧部分）
截图在这里：http: //inants.com/kadmos/web/menu.png
但问题是它们应该有不同的 html 代码和引导类。这就是为什么我编写了一个 jquery 代码来添加和删除必要的标签和类。例如当浏览器全屏时，我的html代码应该如下：
<div class="tabbable tabs-left">
<button type="button" style="display:none;" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#A">My Visited Jobs</a>
</li>
<li>
<a data-toggle="tab" href="#B">My Saved Jobs</a>
</li>
<li>
<a data-toggle="tab" href="#C">My Searches</a>
</li>
<li>
<a data-toggle="tab" href="#D">My Alets</a>
</li>
<li>
<a data-toggle="tab" href="#E">My Profile</a>
</li>
<li>
<a data-toggle="tab" href="#F">My Settings</a>
</li>
</ul>
<div class="tab-content"></div>
</div>
而在响应式视图中，应该有如下代码：
<div class="tabbable tabs-left navbar navbar-inverse openNavbar">
<button type="button" style="display:block;" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#A">My Visited Jobs</a>
</li>
<li>...
</li>
</ul>
</div>
<div class="tab-content"></div>
</div>
所以我们可以看到，在响应模式下，对html做了如下改动：
“navbar navbar-inverse openNavbar”引导类被添加到具有“tabbable”类的 div
在具有“tabable”类的 div 中，“按钮”具有 display:block；
“ul”标签被插入到具有“nav-collapse collapse”类的 div 中
这是响应上面提到的 html 代码更改的 jquery 代码：
<script type="text/javascript">
$(document).ready(function() {
$(window).resize(function() {
if ($(window).width() <= 979) {
$('.content > .tabbable').addClass('navbar navbar-inverse openNavbar');
if ($('.nav').parent().hasClass('tabbable')) {
$('.nav').wrap('<div class="nav-collapse collapse"></div>');
}
$('.content > .tabbable > button').show();
} else {
$('.content > .tabbable').removeClass('navbar navbar-inverse openNavbar');
if (!$('.nav').parent().hasClass('tabbable')) {
$('.nav').unwrap()
}
$('.content > .tabbable > button').hide();
}
});
if ($(window).width() <= 979) {
$('.content > .tabbable').addClass('navbar navbar-inverse openNavbar');
if ($('.nav').parent().hasClass('tabbable')) {
$('.nav').wrap('<div class="nav-collapse collapse"></div>');
}
$('.content > .tabbable > button').show();
} else {
$('.content > .tabbable').removeClass('navbar navbar-inverse openNavbar');
if (!$('.nav').parent().hasClass('tabbable')) {
$('.nav').unwrap()
}
$('.content > .tabbable > button').hide();
}
});
</script>
虽然看起来一切正常，应该可以正常工作，但是……</p>
当我在 Mozilla（Internet Explorer 9）中将页面大小调整为 979 像素到 963 像素之间时，页面正在中断。特别是它在 bootstrap-responsive.css、bootstrap.css、style.css 文件中编写了适当的代码的 @media (max-width: 979px) {...} 条件不起作用。在我看来，问题在于 Mozilla（IE9）和 Chrome 的尺寸不同，尽管在萤火虫中，当尺寸相同时，页面在一个浏览器上显示错误，而在另一个浏览器上显示正确。当我将条件 $(window).width() <= 979) 更改为 $(window).width() < 979) 时，情况正好相反...
将等待您有关此错误解决方案的建议。
提前致谢。