第一个字母随着过渡 + 转换而移动不合需要 (Firefox)

Question

我有一个 div 元素的列表，里面有一个大字母（A、B、C 或 D）和 span（描述）。我想将这些 span 元素相对于每个父元素 div 水平居中，但在所有大字母之间保持固定距离。我正在寻找这样的东西：

居中部分完成：

span{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

但是当我将一个简单的 transition（例如 opacity）应用于 div 元素时，span 元素中的第一个字母从它的位置移开。如果我删除 transition 或 transform 属性问题就会消失，但我需要两者（transform 用于居中）。

Question: How to fix the issue with transition and transform, or how to center span elements without transform, but keeping the fixed distance among big letters?

这里是代码，还有一个DEMO:

HTML:

<div class="elements">
    <div>A<span>Description</span></div>
    <div>B<span>Really Long Description</span></div>
    <div>C<span>Description</span></div>
    <div>D<span>Description</span></div>
</div>

SCSS:

.elements{
    margin-left: 50px;
    div{
        position: relative;
        display: inline-block;
        font-size: 40px;
        margin: 0 10px;
        opacity: 0.7;
        transition: 0.3s;
        &:hover{
            opacity: 1;
            span{
                opacity: 1;
            }
        }
        span{
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            transition: 0.3s;
            font-size: 15px;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
        }
    }
}

Answer 1

根据 compatibility requirements，您始终可以使用 flex box 模型，它很方便 justify-content 属性，像这样：

.elements {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; /*Only one out of the above that's really needed...*/
  justify-content: space-around;/*Only one out of the below that's really needed...*/
  -ms-flex-pack: distribute;
  justify-content: space-around;
}
.elements >div {
  position: relative;
  display: inline-block;
  opacity: 0.7;
  font-size: 30pt;
  text-align: center;
  transition: 0.3s opacity;
}
.elements >div:hover {
  opacity: 1;
}
.elements >div >div {
  font-size: 12pt;
  white-space: nowrap;
}

<div class="elements">
  <div>A
    <div>Description</div>
  </div>
  <div>B
    <div>Long Description</div>
  </div>
  <div>C
    <div>Description</div>
  </div>
</div>

你的问题有一个很好的解决方案，表格！虽然它们应该只用于语义上的表格数据，但它们确实具有一些不错的显示属性，并且它们已被使用 since forever 因此兼容性不是问题。

body{
  display:table;
  table-layout:fixed;
}
.elements{display:table-row;}
.elements >div {
  width:20%; /*100% / Number of cells*/
  display:table-cell;
  padding:0 10px; /*There needs to be a little spacing otherwise it looks bad :) */
  opacity: 0.7;
  font-size: 30pt;
  text-align: center;
  transition: 0.3s opacity;
}
.elements >div:hover {
  opacity: 1;
}
.elements >div >div {
  font-size: 12pt;
  white-space: nowrap;
}

<div class="elements">
  <div>A
    <div>Description</div>
  </div>
  <div>B
    <div>Long Description</div>
  </div>
  <div>C
    <div>Description</div>
  </div>
  <div>D<div>Description</div></div>
</div>

Answer 2

我还没有找到使 transition 和 transform 属性正常工作的方法（至少是 Firefox）。但我找到了一种方法，将每个 span 元素置于其父元素 div 的中心，并在大字母（A、B、C 和 D）之间保持距离。

见SOLUTION DEMO，代码添加（SCSS）：

$div-width: 40px;
$span-width: 200px;

.elements{
    div{
        width: $div-width;           // fixed width
        text-align: center;          // center text
        span{
            width: $span-width;                     // big fixed width
            left: -($span-width/2 - $div-width/2);  // -(200px / 2 - 40px / 2)
        }
    }
}

第一个字母随着过渡 + 转换而移动不合需要 (Firefox)

First letter moving undesirably with transition + transform (Firefox)

html

css

css-transitions

css-transforms