Question

我已经玩了一段时间，但我无法弄清楚offsetHeight ul的CSS是什么以下仅为2.换句话说，为什么offsetHeight document.querySelector(".myclass").offsetHeight仅为html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, button, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video { font-size: 100%; font: inherit; font-size-adjust: auto; -webkit-font-smoothing: antialiased; vertical-align: baseline; border: 0; padding: 0; margin: 0; } ol, ul { list-style: none; } .thingie>ul { margin: 0; border: 1px solid #BCBEC0; } main, summary, article, aside, details, footer, header, hgroup, menu, nav, section { display: block; } .leftpane { position: absolute; width: 380px; overflow: auto; overflow-y: hidden; -webkit-transition: margin-left 1s ease-out, width 1s ease-out; -moz-transition: margin-left 1s ease-out, width 1s ease-out; -o-transition: margin-left 1s ease-out, width 1s ease-out; -ms-transition: margin-left 1s ease-out, width 1s ease-out; transition: margin-left 1s ease-out, width 1s ease-out; } .mypage aside.leftpane { display: none; } .mypage aside.leftpane { display: block; } .mypage.mypage_contents .main-mini-toc .leftpane { margin-left: -402px; } .mypage.mypage_contents.leftpaneshown .main-mini-toc .leftpane { margin-left: 0px; } form.contentview { position: relative; padding-bottom: 20px; } .mypage_contents.leftpaneshown .contentview { margin-left: 250px; } .mypage.mypage_contents.leftpaneshown .contentview { margin-left: 0px; } .pagewrapper { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .pagewrapper { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 15px; margin: 0 auto; } /* @media screen and (min-width:760px) */ .pagewrapper { max-width: 1226px; } /* @media screen and (min-width:760px) */ .pagewrapper { max-width: 1226px; } .pagewrapper { padding: 0 15px; max-width: 1226px; margin: 0 auto; } main>.pagewrapper { overflow-x: hidden; } main { display: none; } .mypage_contents { clear: both; display: none; margin: 0 auto 23px; } .comp::after { content: "."; display: block; height: 0px; font-size: 0px; visibility: hidden; overflow: hidden; clear: both; border-style: none !important; padding: 0 !important; } .mypage_contents.beenshown { display: block; } body { font-size: 14px; font-size: 1.4rem; font-family: Helvetica, Arial, sans-serif; color: #373739; } html { font-size: 62.5%; } button { overflow: visible; background-color: transparent; cursor: pointer; border: 0; } [type=text], [type=email], [type=date], [type=password], [type=search], input[type=submit], input[type=button], select, textarea, button { display: inline-block; vertical-align: middle; } .hideborder>button, .showborder>button { color: #fff; vertical-align: inherit !important; } .thingie li button { padding: 0; margin: 0; width: 20px; position: absolute; top: 0px; bottom: 0px; left: 0px; border-right: 1px solid #bcbec0; background: #fff; }？

如果我摆脱了所有的CSS，它就会显示为一组垂直按钮。我看到380的宽度设置在哪里，但不是高度。

以下是片段：

＆＃13;

<!DOCTYPE html>
<html lang="en-GB">

<body>

  <main class="comp mypage_contents beenshown mypage leftpaneshown" id="L9tk">
    <div class="wrapper pagewrapper ">
      <form class="contentview" role="form" action="" novalidate="novalidate">
        <div class="main-mini-toc">
          <aside class="thingie leftpane noreader" style="width: 380px; margin-left: 0px;">

            <ul class="myclass">
              <li class="hideborder" id="searches">
                <button class="recentsearchbtn" type="button">
                  Button1
                </button>
              </li>
              <li class="showborder" id="pages1">
                <button class="recentbtn" type="button">
                  Button2
                </button>
              </li>
            </ul>

          </aside>
        </div>
      </form>
    </div>
  </main>

</body>

</html>

＆＃13;

PythonMDK>>
    README.txt
    setup.py
    PythonMDK>>
        code1.py
        code2.py
        __init__.py

＆＃13;

Answer 1

如果您没有为元素指定显式高度，它将根据内容呈现其高度，不包括“快照”的孩子。出来，例如位置固定或绝对。

在这种情况下：myClass有两个li元素，他们自己没有指定它们的高度。因此它根据其内容计算其高度。由于内容（按钮）具有位置：绝对应用于它，因此它不是正常渲染流程的一部分。该按钮从内容计算中排除，返回高度为零，这使得myClass的元素为零像素。

它呈现为两个像素，因为边框在顶部和底部添加了一个像素。

为什么offsetHeight在<ul>下只有2？

1 个答案: