Question

我正在尝试将响应式菜单集成到我的网站here，但我还在其上运行了一个颜色框脚本。问题是，响应式菜单的css（我得到here）搞乱了我的colorbox css。 css如下：

colorbox 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>

谢谢所有先进的帮助。〜MYY

Answer 1

什么盒子大小：边框;确实如此，它将包含内容宽度中的所有边框和填充宽度/长度。因此，而不是1px边框+ 50px宽度= 52px总宽度，border-box将始终强制总宽度为50px。

您可以随时使用媒体查询并开始使用特定屏幕尺寸的边框，这样可以很好地分离您的普通和移动广告，但是它会在您需要修复的小屏幕上导致类似的错误。以下是媒体查询的快速介绍：http://css-tricks.com/css-media-queries/

或者你可以摆脱边框并手动轻推你所看到的任何变化（使用FF的firebug或Chrome开发者工具）。但我确实想补充一点，边框非常酷，而且非常酷。方便的话，你应该考虑将它留在并轻推你的默认代码。

如何修复冲突的响应式菜单Css和Colorbox css？

1 个答案: