当仅在 chrome 中具有绝对元素时，css 轮廓不会扩展以包含所有内部元素

Question

我已经在 firefox 上测试了以下代码并且运行良好，但是在 chrome 上测试时大纲没有包含所有元素 on firefox on chrome

function ShowHideList(elem) {
    var container = document.getElementById("container")
    var islist = container.getAttribute("islist")
    if (islist == "0") {
        elem.value="Hide"
        container.setAttribute("islist","1")
    } else {
        elem.value="Show"
        container.setAttribute("islist","0")
    }
}

.container{
    outline:1px solid red;
    position:relative;
}
.container ul{
    position:absolute;
    top:10px;
    left:10px;
}
.container[islist='0'] ul{
    display:none;
}
.container[islist='1'] ul{
    display:block;
}

<div id="container" class="container" islist="0">
    <input type="button" onclick="ShowHideList(this)" value="Show" />
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
</div>

Answer 1

因为 ul 是绝对定位的。 (它在 Firefox 中确实有效，这实际上令人惊讶。)

除此之外，您可以通过切换 classList 来简化您的代码:

function ShowHideList(elem) {
  var container = document.getElementById("container")
  container.classList.toggle('shown');
  elem.value = elem.value === 'Hide' ? 'Show' : 'Hide';
}

function ShowHideList(elem) {
  var container = document.getElementById("container")
  container.classList.toggle('shown');
  elem.value = elem.value === 'Hide' ? 'Show' : 'Hide';
}

.container {
  outline: 1px solid red;
  position: relative;
}
.container ul {
  top: 10px;
  left: 10px;
}
.container ul {
  display: none;
}
.container.shown ul {
  display: block;
}

<div id="container" class="container" islist="0">
  <input type="button" onclick="ShowHideList(this)" value="Show" />
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
  </ul>
</div>

由于 ul 需要绝对定位，您可以添加一个 div 作为绝对定位容器的子项。将轮廓移动到它，并在容器上硬编码一个高度以仅显示按钮。

function ShowHideList(elem) {
  var container = document.getElementById('container'),
      ul = container.querySelector('ul'),
      height;
  
  container.classList.toggle('shown');
  elem.value = elem.value === 'Hide' ? 'Show' : 'Hide';
}

.container {
  position: relative;
  height: 24px;
}
.container div {
  position: absolute;
  outline: 1px solid red;
  width: 100%;
  background: white;
}
.container ul {
  display: none;
}
.container.shown ul {
  display: block;
}

<div id="container" class="container">
  <div>
    <input type="button" onclick="ShowHideList(this)" value="Show" />
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>
  </div>
</div>

<span>Hiiiiiiiii!</span>