html - translateX 导致随机边框出现在 的左侧

Question

我通过使用 50% 的边距和变换将行内 block 元素居中对齐。

当我添加 transform: translateX(-50%); 时，它会导致在我的 div 左侧出现一个细边框(它有点难看，但它位于 '全部”和“搜索产品”的左侧)。

如果我尝试将翻译更改为不同的百分比，它会保留；有时当我更改百分比时边框会变粗。任何人都知道为什么会发生这种情况？

这是我的代码，以防我遗漏了一些可能很重要的东西:

HTML:

<div class="tabs">
   <a class="tab active">All</a>
   <a class="tab">New</a>
   <a class="tab">Popular</a>

   <i class="fa fa-search"></i>

   <div class="search-input active">
       <%= text_field_tag :term, params[:term], placeholder: "Search products..." %>
   </div>
</div>

CSS:

.tabs {

    display: inline-block;
    vertical-align: bottom;
    margin-left: 50%;
    transform: translateX(-50%);
}

.tabs .tab {

    margin-right: 32px;
    color: #92969c;
    height: 40px;
    line-height: 40px;
    text-decoration: none;
    display: inline-block;
    vertical-align: bottom;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
}

.tabs .tab.active {

    color: #25282c;
    -webkit-box-shadow: 0 2px 0 #25282c;
    box-shadow: 0 2px 0 #25282c;
    border-bottom: 2px solid #25282c;
}

.search-input {
    display: inline-block;
    max-width: 240px;
    padding: 0 32px 0 10px;
    height: 40px;
    position: relative;
}

.search-input input {
    outline: none;
    height: 40px;
    width: 100%;
    border: none;
    padding: 0;
}

.search-input.active {
    -webkit-box-shadow: 0 2px 0 #25282c; 
    box-shadow: 0 2px 0 #25282c;
}

编辑: 似乎问题的发生是因为我的 box-shadow 代码:

.search-input.active {
    -webkit-box-shadow: 0 2px 0 #25282c; 
    box-shadow: 0 2px 0 #25282c;
}

但我不想删除我的盒子阴影来解决这个问题......

Answer 1

这是转换中翻译的一个已知错误，解决方案是 null translation hack :

.tabs {

    display: inline-block;
    vertical-align: bottom;
    margin-left: 50%;
    translateX(-50%) translate3d(0,0,0);
}

通过将 translate3d(0,0,0) 添加到您的元素中，您可以在不删除它们的情况下修复您的框阴影问题!