0

私は新しく、CSS3と：empty疑似クラスについて質問があります。

Webajaxアプリケーションを作成します。私のページレイアウトにはサイドバーがあり、空の場合はこれを非表示にします。だから私は書いた：

#my_sidebar:empty { display:none;}

空でないときに表示するために私は書いた

#my_sidebar:not(:empty) { display:block; }

これは機能していますが、Chromeでは、ページまたはリンクを1回クリックした後にのみサイドバーが表示されます。なんで？誰かが私を助けることができますか？

ありがとう！（テリーフィン英語で失礼します!!）

編集：htmlページ：

    <body id='body'>

<!-- Header -->
<header id="top" class="cf">
    <div id="branding">
        <h1><a href=" " onClick="presenter.homepage()">Project Management</a></h1>
    </div>
    <nav id="nav-user">
        <ul>
          <li><a id="user" href="profilo"><span id="username"></span><img id="avatar" class="avatar"></a></li>
          <li><a id="company" href="azienda">Azienda</a></li>
          <li><a id="logout" href="logout">Logout</a></li>
        </ul>
    </nav>
    <nav id="nav-main">
        <ul class="cf">
         <li>
            <button id="back" onClick="javascript: history.back();" href="#" />&larr;</button></li>
        </ul>
       <!--popup con task finiti -->
        <div id="task-ended" class="cf">
          <div class="triangle-border top">
          <div class="clear"></div>
        </div>

    </div><!--task-ended-->
    <!--popup con task finiti -->
  </nav>
</header>

<!-- Main Body -->
<div id="container" class="cf">
    <div id="loading" style="display:none"><img src="images/loading.gif" /></div>
    <div id="my_sidebar" class="sidebar"></div>
    <div id="main" class="main"></div>
</div>
<footer class="cf" id="footer">

Mentis Project Management 
</footer>
</body>

およびcss：

.sidebar {
 float:right;
 width: 36%;
 text-align:left;
}
4

1 に答える 1

2

Chromeのバグは明らかにプロパティでのみ発生するため、代わりにプロパティを非表示にし、スペースが予約されないようdisplayに設定できます。これには、を使用する必要はありません。visibility: hidden;position: absolute;:not(:empty)

いつものように、ブラウザを限界まで押し上げていることに気付いたときはいつでも、立ち止まって、その仕事をするためのもっと簡単な方法があるかどうか自問してください。必要なものに応じて、jQueryshow()とhide()メソッドへの単純な呼び出しも同様に機能します。:)

于 2012-04-25T03:58:34.587 に答える