使用 display:table-cell 找不到链接答案

【问题标题】：Not finding link using display:table-cell使用 display:table-cell 找不到链接
【发布时间】：2017-01-20 01:19:06
【问题描述】：

当我使用 table-cell 属性设置链接样式时，我的标题有一个独特的问题。

该链接只能在其底部单击，不能在中心单击，但可以在顶部单击。此问题无法在在线示例中重现，但会影响所有浏览器。

在研究了类似的问题后，我尝试更改 line-height 但没有效果。其他可能的解决方案建议不使用表格单元格，但这就是我已经对齐标题的方式，更改所有对齐方式会很麻烦。

我注意到的另一件事是，当打开检查元素时，它会将链接显示为三个单独的单元格，全部位于一个垂直列中。

显示问题的图片：

header {
  height: 10%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  border-bottom: 2px solid black;
  background-color: ghostwhite;
  white-space: nowrap;
}
header nav {
  width: 60%;
  display: table;
  height: 100%;
  top: 0;
  right: 0;
  position: absolute;
  color: black;
  text-align: center;
}
header nav div {
  width: 25%;
  position: relative;
  display: table-cell;
  vertical-align: middle;
  font-size: 1.25em;
}
header nav hr {
  transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  top: 20%;
  height: 50px;
  color: black;
  position: absolute;
}
header p:hover {
  color: #DE4738;
}
header nav div:hover {
  color: #DE4738;
}
header img {
  max-height: 90%;
  width: auto;
}
header nav div p {
  font-weight: 600 !important;
}
header a:hover {
  color: #DE4738;
}

<header>
  <div class="content-wrapper">
    <a href="index.html">
      <img src="assets/logo.png" alt="logo" />
    </a>
    <nav>
      <div>
        <a href="asdf.html">
          <p><i>asdf</i>
          </p>
        </a>
      </div>
      <hr>
      <div>
        <a href="adsf.html">
          <p><i>asdf</i>
          </p>
        </a>
      </div>
      <hr>
      <div>
        <a href="Asdf.html">
          <p><i>asdf</i>
          </p>
        </a>
      </div>
      <hr>
      <div>
        <a href="asdf.html">
          <p><i>asdf</i>
          </p>
        </a>
      </div>
    </nav>
  </div>
</header>

【问题讨论】：

我没有看到复制您的标记的问题。哪个浏览器？我们可能需要更多标记。
@Rob 放入 JSFiddle 时问题没有复制，问题出现在 Chrome、Firefox 和 IE 中。希望图片可以提供上下文。
好吧，我在 Firefox 或 Chrome 中看不到它。
可能是缓存问题？如果它在 JSFiddle 中使用完全相同的代码工作，那么浏览器似乎没有注意到您的 CSS/HTML 正在发生变化。你清除缓存了吗？
@JoeSakett 你找到解决方案了吗？可能值得添加它并接受它作为答案。

标签： html css

【解决方案1】：

当我尝试运行您的内容时，如果我使用了格式错误的样式标签，我可能会复制您的格式问题。

没有对您的 CSS 进行任何更改，但我将 HTML 更改为以下内容：

我添加了 HTML5 doctype、html、head 和 style 标签以使其在本地文件中工作。然后它在 Firefox 和 IE 中都正确呈现。我没有 Chrome 在这里测试它。

<!DOCTYPE html>
<html>
<head>
<style>
/*copy paste your CSS in here */
</style>
</head>
<body>
<header>
    <div class="content-wrapper">
        <a href="index.html">
            <img src="assets/logo.png" alt="logo" />
        </a>
        <nav>
            <div>
                <a href="asdf.html">
                    <p><i>asdf</i></p>
                </a>
            </div>
            <hr>
            <div>
                <a href="adsf.html">
                    <p><i>asdf</i></p>
                </a>
            </div>
            <hr>
            <div>
                <a href="Asdf.html">
                    <p><i>asdf</i></p>
                </a>
            </div>
            <hr>
            <div>
                <a href="asdf.html">
                    <p><i>asdf</i></p>
                </a>
            </div>
        </nav>
    </div>
</header>
</body>
</html>

【讨论】：

这不是问题，由于节省了问题的空间，我没有包含开始标签。所有标签均有效且 CSS 链接正确。