0

I'm new and i have a question about CSS3 and :empty pseudo-class.

I create a web ajax application. In my page layout I've got a sidebar and i want to hide this if is empty. So i wrote:

#my_sidebar:empty { display:none;}

For display it when isn't empty i wrote

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

This is working but with chrome the sidebar appear only after one click on the page or on a link. Why? Can someone help me?

Thanks! (excuse me for my terryfing english!!)

EDIT: the html page:

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

and 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 回答