下拉菜单文本忽略行，不继承字体大小答案

【问题标题】：Dropdown menu text ignores lines, doesn't inherit font-size下拉菜单文本忽略行，不继承字体大小
【发布时间】：2015-06-29 17:39:37
【问题描述】：

我正在构建一个简单的导航栏，将 <ul> 列表嵌套在 div 中。

在this tutorial 之后，我尝试在导航栏中实现一个简单的 CSS 下拉菜单。

我正在使用reset.css 和一个名为ionicons 的自定义图标字体，但我已经构建了没有它们的截图并重新创建了问题。

由于某种原因，悬停时显示的下拉列表具有更大的文本，并且文本大于字体行（它重叠）。我认为下拉菜单只会从父元素继承字体样式，但显然情况并非如此。

我尝试手动设置，但目前无法更改。

我不知道该尝试什么以及我做错了什么。下面的片段

html {
  font-family: 'Lato', sans-serif;
}
@media (min-width: 992px) {
  html {
    margin: 0 5%;
  }
}
/********************************
NAVBAR
********************************/

#navbar {
  background-color: #913D88;
}
@media (min-width: 992px) {
  #navbar {
    border-radius: 10px;
  }
}
#navbar ul {
  list-style: none;
}
#navbar ul li {
  padding: 0.5em;
  font-size: 1.1em;
  font-weight: 400;
  display: inline-block;
}
@media (min-width: 767px) {
  #navbar ul li {
    font-size: 1.2em;
  }
}
#navbar ul li a {
  padding: 0.3em;
  background-color: #913D88;
}
#navbar ul li a:visited,
#navbar ul li a:link {
  color: #fff;
  text-decoration: none;
}
#navbar ul li a:hover {
  color: #491f45;
  background-color: #c371ba;
}
#navbar ul .dropdown {
  position: relative;
}
#navbar ul .dropdown:hover > .drop-nav {
  display: block;
}
#navbar ul .dropdown .drop-nav {
  position: absolute;
  display: none;
}
#navbar ul .dropdown .drop-nav li {
  padding: 0.5em;
  display: block;
  background-color: #913D88;
  border-bottom: 1px solid black;
}
#navbar ul .dropdown .drop-nav a {
  padding: 0.3em;
  background-color: #913D88;
}
#navbar ul .dropdown .drop-nav a:visited,
#navbar ul .dropdown .drop-nav alink {
  color: #fff;
  text-decoration: none;
}
#navbar ul .dropdown .drop-nav a:hover {
  color: #491f45;
  background-color: #c371ba;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>ZIC Knjižnica</title>

  <link href='http://fonts.googleapis.com/css?family=Lato:400,700,900&amp;subset=latin-ext,latin' rel='stylesheet' type='text/css'>

</head>

<body>
  <div id="navbar">
    <ul>
      <li><a href="http://www.ijs.si/ijsw">IJS</a>
      </li>
      <li><a href="#">knjižnica</a>
      </li>
      <li class="dropdown"><a href="#">zaloga&nbsp;<span class="ion-arrow-down-b"></a>
        <ul class="drop-nav">
          <li><a href="#">novi izvodi tiskanih revij</a>
          </li>
          <li><a href="#">elektronske revije</a>
          </li>
          <li><a href="#">katalog</a>
          </li>
          <li><a href="#">baze podatkov</a>
          </li>
        </ul>
      </li>
      <li><a href="#">storitve&nbsp;<span class="ion-arrow-down-b"></a>
      </li>
      <li><a href="#">ENG</a>
      </li>
    </ul>
  </div>

</body>

</html>

【问题讨论】：

标签： html css

【解决方案1】：

正如您在以下资源中所读到的，em 单位是相对于父值的值。因此，如果您有一个带有 font-size:1.1em 的父元素，并且它的子元素也有 font-size:1.1em，那么子元素的字体大小实际上将是 1.1*1.1*{Top parent font-size}，因此，这些链接看起来更大。

解决方案 1： 例如，如果我将 #navbar ul li 更改为 px 大小，则主链接和悬停链接的字体大小将相同。

#navbar ul li{
 font-size: 14px;
}

解决方案 2： 将1em 设置为下拉列表中链接的字体大小。

#navbar ul .dropdown .drop-nav a{
 font-size: 1em;
}

关于行高毛刺，经过几次检查后，毛刺似乎是由于填充引起的。考虑重置dropdown li a元素的填充，如下：

#navbar ul .dropdown .drop-nav a{
 padding: 0;
}

Resource: Chapter 4: The amazing em unit

用于指定字体大小时，em单位指字体大小的父元素。因此，在上面的示例中， h1 元素设置为 body 元素字体大小的两倍。为了找到 h1 元素的字体大小，我们需要知道 body 的字体大小。由于这没有在样式表，浏览器将不得不从其他地方找到它 - 一个好看的地方在于用户的喜好。所以，如果用户有将正常字体大小设置为 10 磅，即 h1 元素的大小将是 20 分。这将使文档标题脱颖而出相对于周围的文字。因此：始终使用 em 来设置字体大小。

【讨论】：

将链接字体大小更改为 1em，现在可以了。不过，这仍然不会改变行高问题
行高？会检查它
如中，我将子元素的字体大小更改为 1em，现在它继承了父元素的字体大小，这就是我最初想要的
你可以在 sn-p 中看到它，由于某种原因填充和文本与前一行重叠（当它将链接文本分成两行时）。我尝试将 line-height 设置为 1em，但没有任何改变。
考虑将 line-height 设置为 1.3em 可能

【解决方案2】：

您可以通过在 css 中添加 font-size 属性来手动更改大小。

#navbar ul .dropdown .drop-nav a {
 padding: 0.3em;
  background-color: #913D88;
  font-size:10px;
 }

您可以根据需要更改字体大小。

【讨论】：

【解决方案3】：

#navbar ul .dropdown .drop-nav a {
padding: 0.3em;
background-color: #913D88;
font-size: 20px;
}

您可以根据需要选择字体大小。您也可以使用第二种方法。

问题是因为你没有给父标签指定字体大小如果您将字体大小赋予父级，那么子级将已经继承它。

#navbar ul li a {
padding: 0.3em;
background-color: #913D88;
font-size: 10px;
}

【讨论】：