css - Div 仅在 Google Chrome 中正确显示(获胜)

Question

我遇到了一个让我发疯的问题。我在一个网站上工作，该网站在与主导航相同的 div 中有一个框。它一直显示到右边(栏的宽度为 100%)，我需要它显示在带有主导航的 div 中(宽度 1020px)

我正在更改我的 div 的结构，但它只能在 Chrome (win) 中正确显示。我还测试了 Safari (win)、Chrome (mac) 和 Safari (win)。

这是我所拥有的:

HTML

<div id="navigation" class="gb_ff clearfix">
    <div id="main_navigation" class="container hor_navigation clearfix">
        <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'theme_location' => 'header', 'depth' =>'2', 'container' => 'none' ) ); ?>        
        <?php if ( !is_user_logged_in() ): ?>

        <div id="nav_subscription" class="subscription_form clearfix"> <span id="subscribe_dd" class="contrast">
            <?php gb_e( 'Get the Latest Deals' ) ?>
            </span>
        </div><!-- #main_navigation -->

        <div id="subscription_form_wrap" style="display:none;">
            <div class="optinbar_close" style="bottom: 202px; left: -10px;"></div>
            <p class="fillout2">Γράψε το όνομα και το email σου και κλίκαρε 'Στείλτε το δώρο μου'. </p>
            <!-- Begin MailChimp Signup Form -->
            <!--End mc_embed_signup-->
        </div>
    </div><!-- #header_subscription.subscription_form -->
    <?php endif ?>
</div><!-- #navigation -->

CSS

#navigation, #main_navigation li a {
    width: 100%;
    color: #999999;
}

#navigation {
    margin: 0 auto;
    padding: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-bottom: 0;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    position: relative;
    z-index: 50;
    font-size: .9em;
    background: url(http://deals.karditsa.topgreekgyms.gr/wp-content/themes/gbs-merchant-dashboard/img/menu_gradient.png) repeat-x center bottom;
}

#main_navigation {
    height: auto;
    width: 1020px;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

#subscription_form_wrap {
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background: none;
    background-color: #FFFFFF;
    padding: 0;
    float: left;
    position: absolute;
    top: 46px;
    right: 0;
    height: auto;
    min-width: 200px;
    border: 1px solid #CCC;
    font-size: 13px;
}

#subscribe_dd {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 31px;
    background-color: #999999;
    width: 255px;
    height: 31px;
    white-space: nowrap;
    padding: 10px 20px 5px;
    text-shadow: rgba(0, 0, 0, 0.5) 0 1px;
    position: absolute;
    top: 0;
    right: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 10;
    border-bottom: 1px solid #CCC;
    border-bottom: 1px solid rgba(255, 255, 255, .2);    
}

我正在开发 WordPress。

Answer 1

您可能首先将“Get The latest Details”框放入 ID 为 main_mavigation 的 div 中。现在它位于 id 为“navigation”的 div 中，并且绝对定位为 right=0，因此它显然会一直向右移动。