jquery - 修复 last li 并滚动 ul firefox 问题

Question

它在 Crome 中运行完美，但在 firefox 中 second-last list item 'country name 8' 不可见，您可以通过 firebug 看到它。

条件:-

1. 不能将 div 或其他标签用于必须位于 li 中的最后一个列表项。
2. 它必须显示在卷轴内部而不是外部。

只有两个条件。 如果可能的话，我们可以通过 jquery 做到这一点， 提前致谢:)

.searchlist{
	position: relative;
  margin-top:50px;
}
ul{  display: block;
    max-height: 110px;
    overflow-y: auto;
    padding:0px 0px 38px 0px;
	margin:0px;
	width: 223px;
	}
li{padding: 8px 10px;
display: block;
font-size: 13px;
cursor: pointer;
background: #35404d;
}
li.fix{border-top: 1px solid #50575f;
    position: absolute;
    top: 115px;
    width: 185px;}

<div class="searchlist">
	<ul>
		<li>country name 1 </li>
		<li>country name 2 </li>
		<li>country name 3 </li>
		<li>country name 4 </li>
		<li>country name 5 </li>
		<li>country name 6 </li>
		<li>country name 7 </li>
		<li>country name 8 </li>
		<li class="fix">country name 9 </li>
	</ul>
</div>

Answer 1

您移除 ul 的填充并定位倒数第二个 li 并为其添加底部边距。

您可以使用 :nth-last-child(2) . Browser compatibility

li:nth-last-child(2) {
  margin-bottom: 34px;
}

演示

.searchlist {
  position: relative;
  margin-top: 50px;
}
ul {
  display: block;
  max-height: 110px;
  overflow-y: auto;
  margin: 0px;
  width: 223px;
}
li {
  padding: 8px 10px;
  display: block;
  font-size: 13px;
  cursor: pointer;
  background: #35404d;
}
li:nth-last-child(2) {
  margin-bottom: 34px;
}
li.fix {
  border-top: 1px solid #50575f;
  position: absolute;
  top: 69%;
  width: 185px;
}

<div class="searchlist">
  <ul>
    <li>country name 1</li>
    <li>country name 2</li>
    <li>country name 3</li>
    <li>country name 4</li>
    <li>country name 5</li>
    <li>country name 6</li>
    <li>country name 7</li>
    <li>country name 8</li>
    <li class="fix">country name 9</li>
  </ul>
</div>