css - 关于 HTML 5 主题名称 SVG

Question

在下面的代码中，为什么要使用webkit和ms关键字？

#svgelem {
        position: relative;
        left: 50%;
        -webkit-transform: translateX(-20%);
        -ms-transform: translateX(-20%);
        transform: translateX(-20%);
}

Answer 1

编辑:使用ms- 和webkit- 关键字，因此每个不同的 CSS 处理器版本(microsoft (ms) 和 webkit ) 知道如何处理那条线。这是因为每个 CSS 处理器在不同时间添加了实验性功能，例如转换。

像这样的 CSS block 的典型用法是将元素移动到其父对象在水平轴上的中心。

想法是将元素移动到使左边缘位于父元素的中间:

#svgelemn {
    position: relative;
    left: 50%;
}

现在元素刚好在中间的右边(记住它是中间的左边缘)，你需要将元素向左移动它自己宽度的 50%(不是它的父宽度) ).因为我们将元素向左移动，所以我们还需要反转百分比，使其为负数 (-50%)。所以现在你添加转换部分:

#svgelemn {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%); /* Webkit specific transform */
    -ms-transform: translateX(-50%); /* Microsoft specific transform */
    transform: translateX(-50%); /* Generic transform (all evergreen browsers) */
}

您的代码只进行了 20% 的最终调整，所以这还不完全是中间值。

你可以看一个例子here .您可以看到顶部元素如何位于中间，而原始代码使其稍微偏离中心。