Question

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

看看这里，'services'链接是以下代码：

<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上测试过。我错过了什么？

Answer 1

nav a - line-height: 0;

到

nav a - line-height: normal;

Answer 2

span 是内联元素，因此高度不应该有效，您可以尝试添加display:inline-block

在这里查看How to set height property for SPAN

Answer 3

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

但也许;包裹这个区域＆＃39; <a>Services </a>＆＃39;在div中，现在你有一个，有时候很难得到你想要的东西，就像其他答案所描述的那样。 （跨度主要用于内联文本格式，而不是高度，嵌套等等）了解有关 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
}

Firefox填充忽略位置绝对？

3 个答案: