我正在尝试将响应式菜单集成到我的网站，但我还运行了一个彩盒脚本。问题是，响应式菜单的 css（我在这里）搞乱了我的 colorbox css。CSS如下：
彩盒CSS：
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999;
overflow:hidden; }
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
响应式菜单 css 如下：
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
nav {
width: 90%;
margin: 50px auto;
}
nav ul {
list-style: none;
text-align: right;
/* overflow: hidden; */
}
nav li a {
background: #444;
border-right: 1px solid #fff;
color: #fff;
display: block;
float: left;
font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 12.5%;
/*TRANSISTIONS*/
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}
/*HOVER*/
nav li a:hover , nav li a.current{
background: #222;
}
nav li a:visited {
color:#FFF;
}
nav li:last-child a {
border: none;
}
/*SMALL*/
nav small {
color: #aaa;
font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
text-transform: none;
}
...more responsive css STUFF ( unimportant)
我已经找到了问题。我需要帮助修复它。当我打开彩盒图片时，框本身比弹出窗口的其余部分要小。所以它看起来很棒，我正在 FireFox 18.0.1 中对其进行测试，但如果我使用 Chrome 版本 24.0.1312.56 m 并且它可以在 Chrome 中运行（它显示了整个事情）
问题在于菜单css中的这一行：
-moz-box-sizing: border-box;
而且我对它不太熟悉，不知道它在做什么，但我知道如果我把它拿出来，我的响应式设计菜单不能正常工作，但我的颜色框可以。我正在考虑将它从 css 的“*”部分中取出并将其添加到其他地方，但我该怎么做呢？我可以将其硬编码为 div 或其他内容吗？这是我的html：
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<link rel="stylesheet" href="stylesheets/menu-css.css">
<link rel="stylesheet" href="colorboxjs/colorbox/colorbox1.css" />
<script type="text/javascript" src="jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="colorboxjs/jquery.colorbox-min.js"></script>
<script>
$(document).ready(function(){
$(".gallery3").colorbox({rel:'gallery3', transition:"none", width:"75%", height:"75%"});
});
</script>
</head>
<body>
<!-- Primary Page Layout
================================================== -->
</div><!-- container -->
<div class="container" style="background:lightgray; padding: 15px">
<h3> 5 menu right </h3>
<nav>
<ul>
<li><a class="current" href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
<li><a href="#">Fourth</a></li>
<li><a href="#">Fifth</a></li>
</ul>
</nav>
</div>
<div class="container" style="background:lightgray; padding: 15px">
<P>THIRD TYPE - No Transition + fixed width and height (75% of screen size)</P>
<a class='gallery3' href='images/slider-1.jpg'>Pic 1</a>
<a class='gallery3' href='images/slider-2.jpg'>Pic 2</a>
<a class='gallery3' href='images/slider-3.jpg'>Pic 3</a>
</div>
<br/><br/>
<!-- End Document
================================================== -->
<script>
jQuery('a.gallery').colorbox();
</script>
</body>
</html>
感谢所有高级帮助。～喵喵