Safari列数Bug

时间:2017-10-11 14:55:52

标签: html css safari column-count

所以我在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

1 个答案:

答案 0 :(得分:0)

这是相同的,position: absolute元素没有z-index:999adisplay:block元素添加a

&#13;
&#13;
.menu ul{
  column-count: 2;
}
.menu ul li{
     width: 257px;
     height: 35px;
}
.menu ul a{
 display:block;
     width: 257px;
    height: 35px;
}
&#13;
<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>
&#13;
&#13;
&#13;