相关疑难解决方法(0)

当流体宽度(基于百分比)容器太小而无法显示整个图像时,如何使图像保持居中？

如何将图像置于其容器中心

这意味着当容器太小时,它应该显示图像的中间而不是侧面.

我想我现在写了类似下面的内容一千次:

.foo {
    border-radius: 10px;         /* W3C */
    -moz-border-radius: 10px;    /* Mozilla */
    -webkit-border-radius: 10px; /* Webkit */
}

但是现在才考虑这些的排序是否重要？我知道这之间-moz-*并-webkit-*不要紧,因为这些至多1将被读取,但它是更好的(以适应未来发展而言,等)先做W3C标准或持续多久？

对于我的网站，我正在使用这个螺旋动画： Codepen

这是它在 Chrome 中的样子（应该是这样）：

这就是它在 Safari 中的样子：

css 转换在谷歌浏览器中看起来很棒，但在 Safari 中它坏了。

我尝试了以下（如其他论坛/线程中所述），但没有成功：

transform: translateZ(0px);
transform-style: flat;
transform: translate3d(0,0,0);

以下是一些类似/相关的问题。但是经过数小时的搜索，我没有找到任何解决方案（是的，我尝试了我找到的所有答案）：

• 通过变换防止 Safari 剪切
• 旋转元素上的 Safari 渲染问题
• Safari 中的 CSS 转换变换 z-index 冲突（适用于 Chrome / FF）
• Safari 上的 CSS 翻译问题
• CSS 转换导致 div 在 Safari 中重叠？
• Safari 上 CSS3 rotateY 过渡中的错误？
• 与 chrome 相比，为什么 Safari 对待转换的翻译不同？
• 为什么在 Safari 上转换翻译不能正常工作？
• Safari CSS 过渡闪烁
• Safari 上的 CSS TranslateY 动画

相关错误？

• https://bugs.webkit.org/show_bug.cgi?id=188656
• https://bugs.webkit.org/show_bug.cgi?id=61824
• https://bugs.webkit.org/show_bug.cgi?id=54766
• https://bugs.webkit.org/show_bug.cgi?id=88587

我的代码基于这个博客：https : //codemyui.com/spiral-banner-text-animation-using-pure-css/

这是代码（与此处Codepen相同）

html：

<ul> …