0

FF でどのように表示され、どのように動作するか:

i.imgur.com/AreNVWX.png

クロムでどのように見えるか：

i.imgur.com/hT8FGD3.png

http://mindwuehle.de/ - 自分で見てください

現在のプロジェクトで奇妙な問題に遭遇しました。ブートストラップを使用してワードプレスのテーマに取り組んでいます。テーマには、メニューとサブメニューを備えたトップ ナビゲーション バーがあります。

しかし、何らかの理由で 2 番目のドロップダウンが正しく表示されず、パーツが非表示になっています。そのサイズの div はどこにもありません。「要素の検査」でもわかりませんでした。

ただし、最も奇妙な部分: 左側から問題のリンクに移動すると、ドロップダウンが正しく表示されますが、右側から移動すると、ドロップダウンが壊れています。

ブートストラップ 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: ナビゲーションの問題 ×</button> 警告!</h4> 古いブラウザを使用しています。このウェブサイトを正しく表示するには、新しいバージョンの Chrome または Firefox を使用してください。</div> 

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

これが何らかの方法で修正され、自分でアイデアが尽きたとしたら、とてもうれしいです...よろしくお願いします！

4

1 に答える 1

0

私はそれを解決しました。

問題は一種のコードでしたが、それでも 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 は遠く離れたオブジェクトを処理できません。とにかく助けてくれてありがとう。

于 2013-03-29T13:29:10.953 に答える