Question

我想要一个位于视口顶部的导航栏，与我的内容对齐。

我使用各种来源解决了这个问题，在https://jsfiddle.net/EAEKc/1657/上提出了一个最小的工作示例。

HTML：

<div class="wrapper">
    Some text in the wrapper
    <div class="nav-container">
        <nav class="site-nav"> 
            <a class="link">Link1</a>
            <a class="link">Link2</a>
        </nav>
    </div>
    <div class="content">
        Hello content
    </div>
</div>

CSS：

body {
    margin:0;
}
.wrapper {
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
    padding: 30px;
    background-color: #F00;
}
.nav-container {
    position: fixed;
    top: 0;
    width: 500px;
    max-width: -webkit-calc(100% - 60px);
    max-width: calc(100% - 60px);
}
.site-nav {
    position: absolute;
    right: 0;
    text-align: center;
    background-color: #00F;
}
.link {
    display: block;
    float: left;
    margin: 5px;
    background-color: #FFF;
}
.content {
    height: 1000px;
    width: 100%;
    background-color: #A00;
}

如上所述，这“适用于我”（当前的Firefox @Desktop，Safari @ iOS，Firefox @Android），但它似乎与浏览器不兼容：我的Android内置浏览器仍然喜欢对齐酒吧在左边。或者更糟糕的是，只需在屏幕左侧稍微踢它。

如何开始为大多数浏览器开展这项工作？

解决方案

结合多种资源的提示，我能够提出一个更简单的解决方案。查看https://jsfiddle.net/EAEKc/1668/进行演示。

HTML

<div class="wrapper">
    Some text in the wrapper
    <div class="nav-outer-container">
        <div class="nav-container">
            <div class="site-nav"> 
                <a class="link">Link1</a>
                <a class="link">Link2</a>
            </div>
        </div>
    </div>
    <div class="content">
        Hello content
    </div>
</div>

CSS（只有不同的部分）

.nav-outer-container{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}
.nav-container {
    margin: 0 auto;
    max-width: 500px;
    padding: 0 30px;
    text-align: right;
}
.site-nav {
    display: -moz-inline-stack;
    display: inline-block;
    text-align: center;
    background-color: #00F;
    zoom: 1;
    *display: inline;
}

Answer 1

calc()与所有浏览器不兼容，请点击此处查看桌面和移动兼容性列表https://developer.mozilla.org/en-US/docs/Web/CSS/calc

对于所有不兼容的版本，你应该有一个后备，我给你的链接也有后退的例子。

导航栏定位交叉兼容性

解决方案

1 个答案: