当我使用 table-cell 属性设置链接样式时，我的标题有一个独特的问题。
链接只能在其底部点击，不能在中心点击，但可以在顶部点击。此问题无法在在线示例中重现，但会影响所有浏览器。
在研究了类似的问题后，我尝试更改 line-height 但没有效果。其他可能的解决方案建议不使用 table-cell，但这就是我已经对齐标题的方式，更改所有对齐方式会很麻烦。
我注意到的另一件事是，当打开检查元素时，它会将链接显示为一个垂直列中的三个独立单元格。
图片显示问题:
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>最佳答案
当我尝试运行您的内容时，如果我使用格式错误的样式标签，我可能会复制您的格式问题。
没有对您的 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>
关于html - 使用显示 :table-cell 未找到链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41745041/