Safari 列数错误

Question

所以我在 Safari 中发现了这个 Bug，但找不到修复它的解决方案。

.menu ul{
  column-count: 2;
}
.menu ul li{
     width: 257px;
    height: 35px;
}
.menu ul a{
  position: absolute;
  z-index: 999;
     width: 257px;
    height: 35px;
}

<div class="menu">
  <ul>
    <li><a href=""></a>was</li>
    <li><a href=""></a>something</li>
    <li><a href=""></a>dtzdnj</li>
    <li><a href=""></a>was</li>
    <li><a href=""></a>something</li>
    <li><a href=""></a>dtzdnj</li>
    <li><a href=""></a>was</li>
    <li><a href=""></a>something</li>
    <li><a href=""></a>dtzdnj</li>
  </ul>
</div>

所以左侧是完全可点击的，但右侧不是，因为元素实际上并不在右侧。

This Image shows the problem while hovering an element which should be on the right side

Answer 1

这是相同的，但 a 元素没有 position: absolute 和 z-index:999，并向 a 元素添加 display:block

.menu ul{
  column-count: 2;
}
.menu ul li{
     width: 257px;
     height: 35px;
}
.menu ul a{
 display:block;
     width: 257px;
    height: 35px;
}

<div class="menu">
  <ul>
    <li><a href=""></a> was </li>
    <li><a href=""></a> something </li>
    <li><a href=""></a> dtzdnj </li>
    <li><a href=""></a> was </li>
    <li><a href=""></a> something </li>
    <li><a href=""></a> dtzdnj </li>
    <li><a href=""></a> was </li>
    <li><a href=""></a> something </li>
    <li><a href=""></a> dtzdnj </li>
  </ul>
</div>

Safari 列数错误

Safari column-count Bug

html

css

safari

column-count