如何在 html 中将锚元素的高度填充到 100%？

Question

我创建了一个具有height: 50px的顶栏，然后在其中创建了一个锚元素，带有填充的锚元素应该与顶栏高度完全相同。

在主要浏览器中测试代码时，Firefox 已经将顶部栏的确切像素高度提供给锚元素，但在 Chrome 和 IE 中，它的结果为 -1px。在这里摆弄

.HTML：

<div > <a href="">Text Here</a> </div>

.CSS：

div {
    width: auto;
    height: 50px;
    background-color: #333;
}
a {
    padding: 10px;
    display: inline-block;
    font-size: 24px; /* Adjusting this would affect element block size */
    color: white;
    font-family:'Bebas Neue';
    background-color: #777;
}
a:hover { background-color: green; }

如何将<a>锚元素的尺寸填充到div 的高度？

Answer 1

由于似乎没有人向您展示过 box-ssize css 属性： 将以下内容添加到您的<a>

height:100%;
box-sizing:border-box;

编辑：

• 要垂直对齐内容：对<a>元素使用 display table-cell，对其父元素使用 display: table。

div {
  width: auto;
  height: 100px;
  background-color: #333;
}
a {
  padding: 10px;
  display: table;
  font-size: 24px;
  color: white;
  font-family: 'Bebas Neue';
  background-color: #777;
  height: 100%;
  box-sizing: border-box;
}
a > span {
  display: table-cell;
  vertical-align: middle;
}
a:hover {
  background-color: green;
}

<div>
  <a href=""><span>Text Here</span></a> 
</div>

在这里摆弄

Answer 2

这是另一种方式：-

小提琴：http://jsfiddle.net/nikhilvkd/4YQtA/3/

a {
    height: 30px;/*changes here*/
    padding:10px;
    display: inline-block;
    font-size: 24px;
    color: white;
    font-family:'Bebas Neue';
    background-color: #777;
}

Answer 3

div {
    width: auto;
    height: 50px;
    background-color: #333;
}
a {
    padding: 0 10px;    
    height: 50px;
    line-height: 50px;
    display: inline-block;
}

Answer 4

我发现的技术是在<a>元素的顶部和底部使用0 padding，然后使用height: 100%填充高度维度，只需使用line-height: 200%来调整文本。

将这些 CSS 属性更改为：

a {
    padding: 0 10px;
    display: inline-block;
    height: 100%;
    line-height: 200%;
}

在这里摆弄