Question

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

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

在研究类似的问题后，我尝试改变行高，但没有效果。其他可能的解决方案建议不使用表格单元格，但这就是我已经对齐标题的方法，更改所有对齐将会非常麻烦。

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

图片显示问题：
{
{3}}

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>

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

没有使用display：table-cell查找链接

1 个答案: