html - 在旧版浏览器中为 translateX 设置替代方案

Question

在我一直致力于开发的网站 (www.koa-de.nl) 上，我使用了以下代码来使导航栏居中:

left: 50%;
transform: translateX(-50%);

我使用它是因为 margin-left: auto + margin-right: auto 使元素稍微偏离中心。

现在我注意到这在旧版浏览器中不起作用并将菜单部分推出屏幕(由于左侧:50%)

我该如何解决这个问题？我可以添加一些代码来确保导航在所有浏览器上都居中吗？

感谢您的帮助!

Answer 1

看起来您甚至不需要 translate 和 left 属性。试试这个:

.navibar {
    background-color: #ffffff;
    width: 65%;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-style: none solid solid solid;
    border-width: 0 2px 2px 2px;
    border-color: #CF1B19;
    margin: 0 auto;
}

之所以可行，是因为您已经在
.navbar-fixed-top 类上设置了 position: fixed 以及 左:0 和 右:0。
接下来您需要做的就是设置一个 margin: 0 auto 使导航居中。

使用它，导航在我看来完美居中。