Question

我将Chrome浏览器从版本61更新为62，这导致我页面的小册子侧边栏中的2个按钮图标显示为切断，就好像它们已经向下移动一样。经过一番挖掘后，我发现可以通过覆盖以下相关代码来修复按钮：

.sidebar-tabs>ul>li>a {
    display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/sidebar-v2@0.3.1/css/leaflet-sidebar.min.css" rel="stylesheet">
<div class="sidebar-tabs">
  <ul role="tablist">
    <li id="myItemsButton"><a href="#myItems" class="sidebar-icon" role="tab"><i class="fa fa-list-ul"></i></a></li>
    <li id="mySettingsButton"><a href="#mySettings" class="sidebar-icon" role="tab"><i class="fa fa-edit"></i></a></li>
  </ul>
</div>

使用此代码：

a.sidebar-icon {
    display: inline-block !important;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/sidebar-v2@0.3.1/css/leaflet-sidebar.min.css" rel="stylesheet">
<div class="sidebar-tabs">
  <ul role="tablist">
    <li id="myItemsButton"><a href="#myItems" class="sidebar-icon" role="tab"><i class="fa fa-list-ul"></i></a></li>
    <li id="mySettingsButton"><a href="#mySettings" class="sidebar-icon" role="tab"><i class="fa fa-edit"></i></a></li>
  </ul>
</div>

我想知道Chrome中发生了什么变化，或者我的原始CSS / HTML有什么问题，导致此问题突然出现。有没有人有任何见解？

编辑：

我的代码正在使用最新的Leaflet-sidebar库。我通过摆弄Chrome元素检查器中样式中的“display：block”片段找到了这个问题。

我的特定Chrome浏览器是Windows 7上的“版本62.0.3202.62（官方版本）（64位）”。

Chrome浏览器更新会影响链接按钮图标的CSS

0 个答案: