Question

我有一个页面，如果使用Chrome浏览器显示的页面布局出现怪异问题。 其他浏览器没有此问题。

包含文本的元素的垂直位置随机更改。您必须查看示例以了解发生了什么。

例如，尝试在过滤器字段中输入“ y ”字母，布局混乱。与其他字母的布局行为正确。我该如何解决？您能建议一种解决方法吗？

调试没有帮助，这似乎是Chrome错误。你能确认吗？

function myfilter(list, filt) {
  origin = document.getElementById(list)
  var label = origin.getElementsByTagName("label");
  for (var i = 0; i < label.length; i++) {
    var supspan = label[i].parentNode
    var subspan = label[i].getElementsByTagName('span')[0]
    if (subspan.lastChild.textContent.toLowerCase().indexOf(filt.toLowerCase()) > -1)
      supspan.style.display = 'inline'
    else {
      supspan.style.display = 'none'
    }
  }
}

BODY {
  font-family: arial, sans-serif;
  font-size: 12px
}

DIV.lists {
  width: 500px;
  background-color: #ddd;
  margin-top: 100px;
}

.box1 {
  width: 230px;
  height: 190px;
  overflow-y: auto;
  display: inline-block;
  background-color: #ccc
}

<div class="lists">
  <div id="x-99" class="box1">
    <span><label><input type="checkbox" style="display:none"><span>An eagle is flying hign on mount Kailash</span></label><br></span>
    <span><label><input type="checkbox" style="display:none"><span>BTRHGG TWWS to get together first six months - DAY 1</span></label><br></span>
    <span><label><input type="checkbox" style="display:none"><span>BTRHGG TWWS to get together first six months - DAY 2</span></label><br></span>
    <span><label><input type="checkbox" style="display:none"><span>AGC Opening 2015 – The strength to be independent</span></label><br></span>
    <span><label><input type="checkbox" style="display:none"><span>Contributes antiwar nuclear</span></label><br></span>
    <span><label><input type="checkbox" style="display:none"><span>Contributes course dfa number 1</span></label><br></span>
    <span><label><input type="checkbox" style="display:none"><span>Elements for Risk analysis and risk management</span></label><br></span>
    <span><label><input type="checkbox" style="display:none"><span>Elements for the comprehension scenery</span></label><br></span>
  </div>
  Filter: <input type="text" oninput="myfilter('x-99',this.value)">
</div>

随输入而变化的奇怪布局问题（仅适用于Chrome）

0 个答案: