0

我收到了您的答复，内容如下。"如果没有 display:block，anchor(a) 元素将被视为 display:inline。因此，在计算其父元素的大小时（高度默认为 auto），anchor(a) 元素的填充被省略，而它包含在 display:block 的情况下。”

这听起来是正确的，但我不明白为什么当这个元素是内联元素时，li 包括锚元素的填充顶部和填充底部的大小。我的意思是根据您之前的回答，当锚元素位于内联元素中时，锚元素的 padding-top 和 padding:bottom 应该被省略，因为它在这个标记中，因为 display:block 被注释掉了。

这个锚元素在某种程度上有两个父元素。li 元素是锚元素的直接父元素，ul 是 li 元素的父元素，ul 是锚元素的祖先。

如果我运行标记，则 li 元素的背景会更高，因为顶部填充和底部填充为 40px。当计算 ul 的高度时，它不包括锚元素的 padding-top 和 padding-bottom。

这是完整的标记和样式

<!DOCTYPE html>
<html>
<head>


   body
   {
      font-family:Arial, sans-serif;
      font-size:small;
      width:820px;
      margin:0;
      padding:0;
   }

   #nav
   {
       float:left;
       width:100%;
       margin:0;
       padding:10px 0 0 46px;
       list-style:none;
       background:#FFCB2D;
   }

   #nav li
   {
      float:left;
      margin:0 1px 0 0;
      font-family:"Lucida Grande", "sans-serif";
      font-size:90%;
      background:red;
   }

   #nav a
   {
       /*display:block;*/
       margin:0;
       padding:10px 8px;
       color:#333;
       text-decoration:none;
       border:1px solid #9B8748;
       border-bottom:none;
       background:#F9E9A9;
   }

    #nav a:hover
   {
       color:#333;
       padding-bottom:5px;
       border-color:#727377;
      background:#fff;
   }


<meta charset="utf-8" />
<title>Chapter 3</title>
</head>
<body>
<ul id="nav">
  <li id="t-intro"><a href="/">Introduction</a></li>
  <li id="t-about"><a href="about.html">About Lance</a></li>
  <li id="t-news"><a href="news.html">News &amp; Events</a></li>
  <li id="t-sponsors"><a href="sponsors.html">Sponsors</a></li>
</ul> 
</body>

//托尼

4

1 回答 1

0

我收到了您的答复，内容如下。"如果没有 display:block，anchor(a) 元素将被视为 display:inline。因此，在计算其父元素的大小时（高度默认为 auto），anchor(a) 元素的填充被省略，而它包含在 display:block 的情况下。”

是真的。您的<li>-s 高度基于行高。您会看到填充，因为overflow 默认为 visible。如果你设置 

li {
    overflow: hidden;
}

然后顶部和底部填充消失。

内联不可替换元素的高度规范：

内联非替换框的垂直内边距、边框和边距从内容区域的顶部和底部开始，与“行高”无关。但在计算行框高度时只使用“行高”。

计算方块高度的规范：

仅考虑正常流程中的子项（即忽略浮动框和绝对定位框，考虑相对定位框而不考虑它们的偏移量）。请注意，子框可能是匿名块框。

所以你的 ul 得到高度：0。这个问题有几种解决方案，请在quirksmode上查看它们。

于 2013-08-11T13:45:04.903 回答