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

时间:2016-10-07 20:40:35

标签: html css

在我一直在使用的网站(www.koa-de.nl)上,我使用以下代码将导航栏置于中心位置:

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

我使用了这个因为margin-left:auto + margin-right:auto将元素略微偏离中心。

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

我该如何解决这个问题?我可以添加一些代码以确保导航以所有浏览器为中心吗?

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

看起来你甚至不需要翻译和左侧属性。 试试这个:

.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;
}

之所以有效,是因为您position: fixed课程已经.navbar-fixed-topleft: 0right: 0。{
您接下来需要做的就是设置margin: 0 auto以使导航中心。

使用这个导航看起来完全集中在我身上。