个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 00:08:58 24 4
gpt4 key购买 nike

我正在开发一个也使用 jQuery 的开源流体 html 布局。有一个问题一直让我抓狂，因为在过去的几个小时里我一直无法解决这个问题。我确定我遗漏了一些相当简单的东西，如果你能帮我找到它，我将不胜感激。

问题是当我试图让 div#content-wrapper 有一个 min-height 和 margin-left/右边距。基本上它应该填满页面并在左右两侧留出一些空间。

在cssdeck的工作空间中查看时看起来不错http://cssdeck.com/labs/fluid-html-template但是，当您在 http://cssdeck.com/labs/full/fluid-html-template/0 以全屏方式查看时，在 Chromium 开发人员工具 (F12) 上，我看到 #content-wrapper 类与 Matched CSS Rules< 下的 div#content-wrapper 样式规则不匹配。是什么原因造成的？我发现覆盖它的唯一方法是将样式直接应用于具有 style 属性的 div 标记。

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

HTML:

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

CSS:

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

JavaScript:(这只处理菜单)

$(function() {
    $(document.createElement('div')).attr('id', 'menu-p').appendTo('#menu');
    $(document.createElement('div')).attr('id', 'menu-c').appendTo('#menu');
    $('#menu > ul').children('li').children('a').each(function(i) {

        $(this).attr('id', 'menu-p-' + i).parent().children('ul').attr('id', 'menu-c-' + i).appendTo('#menu-c');
        $(this).appendTo('#menu-p').parent().parent().children('ul').remove();

    });
    var shownmenu;
    $('#menu-p').children('a').each(function() {
        var n = $(this).attr('id').split('-')[2];
        var button = $(this);
        if ($('#menu-c-' + n).length) {
            button.button({
                text: true,
                icons: {
                    secondary: "ui-icon-triangle-1-s"
                }
            }).hover(function() {
                $('#menu-c-' + n).show().position({
                    my: "left top",
                    at: "left bottom",
                    of: this
                });
            }, function() {
                $('#menu-c-' + n).hover(function() {
                    $('#menu-c-' + n).show();
                }, function() {
                    $('#menu-c-' + n).hide();
                });
                $('#menu-c-' + n).hide();

            });
            $('#menu-c-' + n).hide().menu();
        }
        else {
            button.button();
        }
    });
    $('#menu-p').buttonset();

});

最佳答案

这很可能是因为 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(无论如何都是完全无效的..)

关于html - Css 样式不匹配或拒绝匹配元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13783943/

24 4 0
文章推荐： node.js - express-session 浏览器关闭时更改 session
文章推荐： angularjs - AngularJS 和 NodeJs 的套接字问题
文章推荐： node.js - 无法使用 Stripe API 更新争议证据
文章推荐： python - 从 python 将变量传递给 Fortran 会导致错误的值
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com