0

我正在尝试将响应式菜单集成到我的网站，但我还运行了一个彩盒脚本​​。问题是，响应式菜单的 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>

感谢所有高级帮助。～喵喵

4

1 回答 1

1

什么 box-sizing: border-box; 确实是，它将在您的内容宽度中包含所有边框和填充宽度/长度。所以不是 1px 边框 + 50px 宽度 = 52px 总宽度，边框框将始终强制总宽度为 50px。

您始终可以使用媒体查询并从某个屏幕尺寸开始使用边框框，这可以很好地分离您的正常和移动 CSS，但它会在您需要修复的小屏幕上导致类似的错误。这是有关媒体查询的快速介绍：http: //css-tricks.com/css-media-queries/

或者，您可以摆脱边框并手动将您看到的任何更改移回原位（为此使用 FF 的 firebug 或 Chrome 开发人员工具）。但我确实想补充一点，边框框非常酷且方便，您应该考虑将其保留并轻推您的默认代码。

于 2013-02-03T00:48:04.170 回答