<p>在 PC 上完成了我的导航栏，并将代码共享到我的 iPhone，以横向和纵向查看。在景观中，导航栏在右侧溢出。添加了 <em>env(safe-area-inset)</em> 值用于非阻塞目的视图，但在右侧溢出。似乎找不到问题所在。</p> <p>iPhone (11 Pro Max) 横向 左侧间隙是安全区域 env()，但右侧安全区域间隙被导航栏溢出。</p> <p>下面是代码：</p> <p> <pre class="brush:css;toolbar:false;">@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital@1&amp;display=swap"); * { box-sizing: border-box; padding: 0; margin: 0; list-style: none; text-decoration: none; font-family: "Montserrat", sans-serif; text-align: center; } body { background: white; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-top: env(safe-area-inset-top); } .nav-bar { display: flex; justify-content: space-between; padding: 0 2rem; height: 50px; align-items: center; background: #0f0f0f; color: #fff; position: fixed; top: 0; width: 100%; z-index: 999; } .hamburger { display: none; } .hamburger i { color: white; font-size: 25px; padding: 5px 7px; border-radius: 5px; } .hamburger i:hover { color: white; background: rgb(69, 69, 69); } .nav-bar .nav-items { display: flex; margin-top: 4px; align-items: center; } .nav-bar .nav-items li a { user-select: none; font-weight: bold; display: block; color: white; font-size: 20px; padding: 4px 10px; transition: 150ms; -webkit-transition: 150ms; -moz-transition: 150ms; margin: 0 10px; } .nav-bar .nav-items li a:after { display: block; content: ""; border-top: 2px solid rgb(140, 73, 255); transform: scaleX(0); -webkit-transform: scaleX(0); -moz-transform: scaleX(0); transition: transform 150ms ease-in-out; -webkit-transition: transform 150ms ease-in-out; -moz-transition: transform 150ms ease-in-out; } .nav-bar .nav-items li a:hover:after, .nav-bar .nav-items li a.active:after { transform: scaleX(1); -webkit-transform: scaleX(1); -moz-transform: scaleX(1); } .nav-bar .nav-items li a:hover { filter: brightness(85%); -webkit-filter: brightness(85%); } .nav-bar .login-register { display: flex; flex-direction: row; } .nav-bar .login-register .button { user-select: none; margin-bottom: 4px; color: #fff; font-size: 20px; border: 2px solid rgb(116, 36, 255); padding: 4px 20px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; transition: all ease-in 0.2s; -webkit-transition: all ease-in 0.2s; -moz-transition: all ease-in 0.2s; } .nav-bar .login-register .button:hover { background: rgb(116, 36, 255); } /*works fine | small res mobile view*/ @media only screen and (max-width: 850px) { .hamburger { height: auto; display: block; cursor: pointer; } .hamburger i { width: 35px; height: 35px; background: #0f0f0f; } .nav-bar .nav-items { flex-direction: column; position: fixed; width: 20vw; background: #383838; padding: 1.5rem 0; height: 280px; top: 46px; z-index: 99; right: -100%; transition: 0.2s ease-in; -webkit-transition: 0.2s ease-in; -moz-transition: 0.2s ease-in; } .nav-bar .nav-items li a { font-size: 20px; padding: 0 10px; margin: 10px 0; } .nav-bar .nav-items.active { right: 0; } }</pre> <pre class="brush:html;toolbar:false;">&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"&gt; &lt;navbar class="nav-bar"&gt; &lt;div class="logo" onclick="window.location.href='Home.html'"&gt;TEST LOGO&lt;/div&gt; &lt;div class="hamburger" for="check"&gt; &lt;i class="fa-solid fa-bars"&gt;&lt;/i&gt; &lt;/div&gt; &lt;ul class="nav-items"&gt; &lt;li&gt; &lt;a href="#" class="active"&gt;Home&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;Explore&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;Shop&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;About&lt;/a&gt; &lt;/li&gt; &lt;div class="login-register"&gt; &lt;a href="#" class="button"&gt;Login&lt;/a&gt; &lt;/div&gt; &lt;/ul&gt; &lt;/navbar&gt;</pre> </p> <p>我和一个朋友尝试了不同的更改，例如 <strong>ma​​rgin-padding、align-items、list-style、overflow、display、width/max-width</strong> 属性。所有这些都会导致导航栏中的内容发生位移或尺寸错误。</p>