Question

我正在开发一个使用jQuery的开源流体html布局。有一个问题让我疯了，因为我在过去的几个小时内无法解决问题。我确定我错过了一些相当简单的东西，如果你能帮我找到它我会很感激。

当我尝试使div＃content-wrapper有min-height和margin-left / margin-right时，

问题。基本上它应该填充页面并在左侧和右侧有一些空格。

在cssdeck http://cssdeck.com/labs/fluid-html-template的工作空间中查看它看起来很好但是当您在http://cssdeck.com/labs/full/fluid-html-template/0全屏查看时，在Chromium Developer Tools（F12）上我看到{{1 #content-wrapper下的div#content-wrapper样式规则不匹配类。可能是什么导致了这个？我发现覆盖此方法的唯一方法是使用Matched CSS Rules属性将样式直接应用于div标记。

由于模板是用jade-lang编写的，因此计算的html，JavaScript和CSS代码可以使事情变得更容易。

HTML：

style

CSS：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
    <script type="text/javascript" src="https://github.com/WeaponXI/cplog/raw/master/public/javascripts/jquery.js"></script>
    <script type="text/javascript" src="https://raw.github.com/WeaponXI/cplog/master/public/javascripts/jquery-ui-1.9.1.custom.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>WeaponXI</title>
  </head>
  <body>
    <div class="wrapper">
      <div class="top-nav ui-widget-header">Home | Login | Etc</div>
      <div class="header">
        <div class="logo"></div>
        <div class="menu ui-widget-header">
          <div id="menu">
            <ul>
              <li> <a href="/" title="Home"> Home</a>
                <ul>
                  <li> <a href="/users" title="Users"> Users</a>
                  </li>
                  <li> <a href="/users2" title="Users"> Users</a>
                  </li>
                </ul>
              </li>
              <li> <a href="/cplog" title="Captains Logs"> Captains Logs</a>
              </li>
              <li> <a href="/contact" title="Contact"> Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="left-panel"></div>
      <div id="content-wrapper" class="ui-widget-content ui-corner-all">
        <div id="content">Content</div>
      </div>
      <div class="right-panel"></div>
      <div class="bottom-panel"></div>
    </div><!--
    <end>wrapper</end>-->
    <footer>
      <div id="footer"><em>Copyright © 2013 WeaponXI.com</em></div>
    </footer>
  </body>
</html>

JavaScript：（这只会处理菜单）

body, html {
    height: 100%;
    margin: 0;
}
.wrapper {
    min-height: 100%;
}
.top-nav {
    z-index:0 !important;
    padding:4px;
    background-color:#333;
    color:white;
    font-size:0.8em;
    opacity:0.6;
}
.top-nav:hover {
    opacity:0.9;
}
.header {
    height: 200px;
    background: #fff;
    overflow: hidden;
    display: block;
}
.logo {
    /*width: 451px;*/

    height:130px;
    background-image:url(https://github.com/WeaponXI/cplog/raw/master/public/images/logo.png);
    background-position:center center;
    background-repeat:no-repeat;
}
.menu {
    z-index:0 !important;
    position:relative;
    text-align: left;
    padding-left:20px;
    padding-top:5px;
    padding-bottom:5px;
    margin-top:5px;
    margin-bottom:5px;
    width:100%;
    height:30px;
font-size : 0.7em;
}
.ui-menu { position: absolute; width: 100px;}


#content-wrapper {
        width:auto;
        margin-left:20px;
                margin-right:20px;
                min-height:600px;
                margin-bottom:20px;
}
#content {
    padding: 20px;
    font:1em;
}
footer {

    width: auto;
    margin-left:20px;
    margin-right:20px;
    border-top: thin solid #999;
    display: block;
}
#footer {
    padding:10px;
    font-size:0.8em;
}

Answer 1

最有可能的原因是HTML无效

<body onload="__pauseAnimations();">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

您到达body，然后开始无效的新html。此html无法访问之前定义的CSS（无论如何完全无效.. ）

Answer 2

    #content-wrapper {
    width:80%;
    height:100%;
    margin: 0 auto 0 auto;
    }
    content {
    padding: 20px;
    font:1em;
    }

如果您希望它是流体使用百分比值..

Answer 3

问题不在语法中。有一个角色是从jsfiddle或cssdeck粘贴的。在读取该特殊字符后，这阻止了css规则。我复制粘贴了那个角色，它是：

U + 200B ZERO WIDTH SPACE（即Unicode U +十六进制表示法）

我用http://rishida.net/tools/conversion/找出那个角色是什么。

Css样式不匹配或拒绝匹配元素

3 个答案: