Question

在FF中它应该是什么样子并且确实如此：

i.imgur.com/AreNVWX.png

它在chrome中的外观：

i.imgur.com/hT8FGD3.png

http://mindwuehle.de/ - 自己看看

我遇到了一个关于当前项目的奇怪问题。我正在使用bootstrap开发wordpress主题。主题有一个顶部导航栏，带有菜单和子菜单。

但由于某种原因，第二次下拉没有正确显示，部分被隐藏。在任何地方都没有这样大小的div，也有“检查元素”我无法弄明白。

最奇怪的部分：当您从左侧移动到问题链接时，下拉列表会正确显示，如果您从右侧进入，则它会被破坏。

我没有更改bootstrap css中的任何内容，因此我只会附加自己的样式表和html，因为错误很可能在这里找到：

html, body {
    height: 100%;
}

#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -120px;
}

/**
 * Global Styles
 */

a , a:hover, a:visited, a:focus, a:active{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

body{
    background: #fff;
}

header{
    background: #a31010;
    height: 100px;
    color: white;
    padding-top: 25px;
    padding-bottom: 25px;
    font-size: 24px;
}

p {
    text-align: justify;
}


i.button-overlay {
    position: absolute;
    margin: 8px;
    z-index: 1;
}

.nav-pills>li>a:hover {
    color: #000;
}

.if-ie {
    position: absolute;
    right:5em;
    width: 500px;
}

.close {
    font-size: 40px;
}

.form-search {
    margin: 20px auto;
    margin-bottom: 20px;
    width: 210px;
}

.page-header {
    margin-top:0px;
    border-bottom: 0px; 
    margin-left:0px;
}

.page-header a{
    color: white;
}

.page-header a:hover{
    text-decoration: none;
}


li.widget {
    list-style-type: none;
}

#page-content {
    -webkit-box-shadow: 0px 1px  1px 1 rgba(0,0,0,.5);
    -moz-box-shadow: 0px 1px  1px   rgba(0,0,0,.5);
    box-shadow: 0px 1px  1px   rgba(0,0,0,.5);
    background-color: #fff;
    margin-top: -10px;
    z-index: 3;
}

/**
* Desktop Navigation, issue may be here somewhere
*/
.navbar .nav>li>a.issue{
    color: red;
}

.navbar{
    -webkit-box-shadow: 0px 1px  20px 1 rgba(0,0,0,.5);
    -moz-box-shadow: 0px 1px  20px   rgba(0,0,0,.5);
    box-shadow: 0px 1px  20px   rgba(0,0,0,.5);
}

.nav {
    width: 100%;
}

.navbar ul ul {
    position: absolute;
    top:-99999999px;
    opacity: 0;
    background-color:#f8f8f8;
    color:#000;
    text-align: left;
    box-shadow: 2px 2px 0 #b5b5b5;
    list-style-type: none;
    margin-left: 0;
}

.navbar ul li:hover > ul{
    position: absolute;
    top:100%;
    opacity: 1;
    border-top: 1px solid #a7a7a7;
    z-index: 3;
}

.navbar .navbar-inner {
    padding: 0;
    min-height: 40px;
    padding-left: 20px;
    padding-right: 20px;
    background-color:   #d6d4bb;
    background-image: -moz-linear-gradient(top, ##d6d4bb, ##c3c09c);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(##d6d4bb), to(##c3c09c));
    background-image: -webkit-linear-gradient(top, ##d6d4bb, ##c3c09c);
    background-image: -o-linear-gradient(top, ##d6d4bb, ##c3c09c);
    background-image: linear-gradient(to bottom, ##d6d4bb, ##c3c09c);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='##d6d4bbf', endColorstr='#ff#c3c09c', GradientType=0);
    border: 1px solid #d4d4d4;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.065);
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.065);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.065);
}

.navbar ul ul a {
    width: 160px;
    line-height: 40px;
    padding: 0 20px;
    display: block;
}

.sub-menu a {
    border-right:0px;
}

.sub-menu ul.sub-menu{
    margin-left:5px;
}

ul.nav ul.sub-menu li {
    display:block;
    z-index: 3;
}

ul.nav ul.sub-menu li:hover > ul{
    position: absolute;
    top:0px;
    opacity: 1;
    left:197px;
    border-top: 0px;
}

ul.nav ul.sub-menu a{
    text-align: left;
}
.navbar ul li {
    position: relative;
    float:left;
}

.navbar .nav {
    -webkit-margin: 0;
    -moz-margin:-10px 0 0;
}
.navbar .nav li {
    display: table-cell;
    width: 1%;
    float: none;
}
.navbar .nav li a{
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(255,255,255,.75);
    border-right: 1px solid rgba(0,0,0,.1);
}

ul.sub-menu li a {
    color: #777777;
    text-decoration: none;
    text-shadow: 0 1px 0 #ffffff;
}

ul.sub-menu li a:hover {
    color: #a31010;
    text-decoration: none;
    text-shadow: 0 1px 0 #ffffff;
}

.navbar .nav li:first-child a {
    border-left: 0;
}
.navbar .nav li:last-child a {
    border-right: 0;
}

ul.sub-menu li a:hover {
    background-color: #e3e3e3;
}

/******** End of Navigation **********/

.item img{
    width: 100%;
}

.media{
    padding: 15px;
    border-bottom: 3px solid #e5e5e5;
}

.nav-pills>.active>a, .nav-pills>.active>a:hover, .nav-pills>.active>a:focus {
color: #ffffff;
background-color: #a31010;
}


.hero-unit {
        padding:0;
    }

HTML：导航问题 ×＆LT; /按钮＆GT; ！警告＆LT; / H4＆GT; 您使用旧浏览器。要正确查看此网站，请使用较新版本的Chrome或Firefox。＆LT; / DIV＆GT;

                        </div>
                    </div>
                </div>
            </div>
        </header>
        <div class="hidden-phone">
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="menu-main-nav-container">
                        <ul id="menu-main-nav" class="nav">
                            <li id="menu-item" class="menu-item menu-item-home">
                                <a href="#">Start</a>
                            </li>
                            <li id="menu-item" class="menu-item"><a class="issue" href="#">Issues here</a>
                                <ul class="sub-menu">
                                    <li id="menu-item" class="menu-item "><a href="#">Link</a></li>
                                    <li id="menu-item" class="menu-item "><a href="#">Link</a></li>
                                    <li id="menu-item" class="menu-item "><a href="#">Link</a></li>
                                </ul>
                            </li>
                            <li id="menu-item" class="menu-item "><a href="#">Link</a>
                                <ul class="sub-menu">
                                    <li id="menu-item" class="menu-item ">
                                        <a href="#">Link</a>
                                    </li>
                                    <li id="menu-item" class="menu-item ">
                                        <a href="#">Link</a>
                                    </li>
                                    <li id="menu-item" class="menu-item "><a href="#">Link</a>
                                        <ul class="sub-menu">
                                            <li id="menu-item" class="menu-item ">
                                                <a href="#">Sub-Link</a>
                                            </li>
                                            <li id="menu-item" class="menu-item">
                                                <a href="#">Sub-Link</a>
                                            </li>
                                            <li id="menu-item" class="menu-item">
                                                <a href="#">Sub-Link</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li id="menu-item" class="menu-item">
                                        <a href="#">Link</a>
                                    </li>
                                </ul>
                            </li>
                            <li id="menu-item" class="menu-item ">
                                <a href="#">Link</a>
                            </li>
                            <li id="menu-item" class="menu-item">
                                <a href="#">Link</a>
                            </li>
                            <li id="menu-item" class="menu-item "><a href="#">Link</a>
                                <ul class="sub-menu">
                                    <li id="menu-item" class="menu-item ">
                                        <a href="#">Link</a>
                                    </li>
                                    <li id="menu-item" class="menu-item">
                                        <a href="#">Link</a>
                                    </li>
                                </ul>
                            </li>
                            <li id="menu-item" class="menu-item">
                                <a href="#">Link</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>


    <div id="main-content" class="container">

            <div class="row">
                <div class="span8">
                    <div class="textwidget">
                        <div class="hero-unit well">
                            <h4>Call to Action Text</h4> <a href="#/" class="btn btn-success btn-small">more</a>
                        </div>
                    </div>
                </div>
                <div class="span4 randompic">
                        <div class="form-search">
                            <form method="get" class="input-append" id="searchform" action="#">
                                <input type="text" class="field span2" name="s"  id="appendedInputButton"  placeholder="enter text" />
                                <i class="icon-search button-overlay"></i><input type="submit" class="submit btn" name="submit" id="searchsubmit" value="&nbsp;&nbsp;&nbsp;Search" />
                            </form>
                        </div>
                    <h4 class="widgettitle right ">Next events</h4><div class="" id=""><p>There are currently no events to display.</p></div>
                </div>
            </div>

            <div class="row">
                <div class="span8">
                        <h3><a href="#">Lorem ipsum Lorem ipsum</a></h3>
                        <h5>Date: 31. Mar, 2013 | Category: <a href="#" title="View all articles" rel="category tag">Article</a></h5>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </div>
                <div class="span4 sidebar">
                    <ul class="nav nav-pills">
                        <li class="active"><a href="#tab-one" data-toggle="tab">Recent entries</a></li>
                        <li><a href="#tab-two" data-toggle="tab">Articles</a></li>
                        <li><a href="#tab-three" data-toggle="tab">Events</a></li>
                    </ul>
                    <div id="home-tab-container" class="tab-content well">
                        <div class="tab-pane fade active in" id="tab-one">
                            <ul>
                                <li class="crpw-item">
                                    <a  href="#" rel="bookmark" title="Permanent link to Lorem ipsum" class="crpw-title">Lorem ipsum</a>
                                </li>
                                <li class="crpw-item">
                                    <a  href="#" rel="bookmark" title="Permanent link to Hello World!" class="crpw-title">Hello World!</a>
                                </li>
                                <li class="crpw-item">
                                    <a  href="#" rel="bookmark" title="Permanent link to Test number 2" class="crpw-title">Test number 2</a>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-pane fade" id="tab-two">
                                <ul>
                                    <li class="crpw-item">
                                        <a  href="#" rel="bookmark" title="Permanent link to Lorem ipsum Lorem ipsum" class="crpw-title">Lorem ipsum Lorem ipsum</a>        
                                    </li>
                                </ul>
                        </div>
                        <div class="tab-pane fade" id="tab-three">
                                <div class="" id="">
                                    <p>There are currently no events to display.</p>
                                </div>                  
                        </div>
                    </div>      
                </div>
            </div>
    <div id="push"></div>   
    </div>
</div>

<footer>
</footer>

</body>
</html>

如果能以某种方式得到解决，我会很高兴，我自己也没有想法......提前致谢！

Answer 1

我解决了。

问题在于代码，但仍然只有Windows Chrome无法正确显示。

我改变了：

.navbar ul ul {
    position: absolute;
    top:-99999999px; /*Change here */
    opacity: 0;
    background-color:#f8f8f8;
    color:#000;
    text-align: left;
    box-shadow: 2px 2px 0 #b5b5b5;
    list-style-type: none;
    margin-left: 0;
}

到

.navbar ul ul {
position: absolute;
top:-99999px; /*Change here */
opacity: 0;
background-color:#f8f8f8;
color:#000;
text-align: left;
box-shadow: 2px 2px 0 #b5b5b5;
list-style-type: none;
margin-left: 0;
}

由于未知原因，Chrome无法处理远处的对象。无论如何，谢谢你的帮助。

Chrome中的CSS下拉菜单问题

1 个答案: