Firefox填充忽略绝对位置？答案

【问题标题】：Firefox padding ignores position absolute?Firefox填充忽略绝对位置？
【发布时间】：2015-07-24 21:36:10
【问题描述】：

https://dev.siterecruitment.co.uk/

看这里，“服务”链接是以下代码：

<li class="expandable">
    <a>Services <span class="dropdown-arrow"></span></a>
    <div class="dropdown">
        <div class="inner">
        ...
        </div>
    </div>
</li>

.dropdown-arrow 具有以下内容，应该将其从流程和任何维度计算中取出：

.dropdown-arrow {
    width: 8px;
    height: 8px;
    position: absolute;
    right: 30px;
    top: 44%;
}

其父级nav a 具有以下内容：

.nav a {
    display: inline-block;
    line-height: 0;
    padding: 50px;
    color: #12A19A;
    text-decoration: none;
    font-weight: 400;
    font-size: 16px;
}

与Services 链接相比，检查链接高度。由于.dropdown-arrow 的存在，它们似乎有所不同。当跨度被删除时，填充恢复为使链接具有相同的高度，这不应该是这种情况，因为跨度设置为 position: absolute 并且不应该影响其父级的尺寸。在 Firefox v36 上测试。我错过了什么？

【问题讨论】：

有什么问题？
对比services链接检查链接高度。它们似乎不同，因为在链接中插入了一个跨度（.dropdown-arrow）。当跨度被删除时，填充恢复为使链接具有相同的高度，这不应该是这种情况，因为跨度设置为 position: absolute 并且不应该影响其父级的尺寸。
因为浏览器默认是span标签！

标签： html css

【解决方案1】：

nav a - line-height: 0;

到

nav a - line-height: normal;

【讨论】：

奇怪的问题和奇怪的解决方案。谢谢！

【解决方案2】：

span 是 inline-element 所以 height 应该不起作用，您可以尝试添加display:inline-block

看看这里How to set height property for SPAN

【讨论】：

block和inline-block都试过了，都没有效果。

【解决方案3】：

我真的不知道你的问题是什么......

但也许；将这个区域'<a>Services </a>'包裹在div 中，现在你有一个，有时很难得到你想要的，正如另一个答案所描述的那样。 （span 主要用于内联文本格式，而不是高度、嵌套等等） 阅读更多关于  Click Here

您还将 嵌套在<a> 标记中，使其成为外部元素。在此处添加一个包装器 div，以提高选择器样式的稳定性和灵活性。

<div class="dothis"><a>Services <span class="dropdown-arrow"></span></a></a>

.dothis { 
   display: // whatever the problem
   max-height: 20px; // set the max height if issue
   line-height: 1;
   vertical-align: text-top; // I don't know what your doing, but you get the idea
   /// all your styles
}

【讨论】：