已关闭，该问题需要details or clarity，目前不接受回答。
**想要改进此问题？**通过editing this post添加详细信息并澄清问题。

昨天关门了。
Improve this question
pic1 pic2
无论如何，我都不能摆脱我的头球。我已经尝试了很多方法，但它不会消失。
由于某种原因，这只显示在iPhone上，在我的桌面上没有问题。我已经包括图片来显示我的问题。
以下是链接，可能问题也会出现在您自己的iPhone上：https://resumerobot.netlify.app/#
Codepen：https://codepen.io/victorcastelan7/pen/yLRVRQJ
我试着将标题元素（有黑色背景）移动到同样有黑色背景的主体内部，但仍然不起作用。边框仍然显示在我的iPhone上

/****************************************************/
/********************** GENERAL *********************/
/****************************************************/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  font-family: "Rubik", sans-serif;
  scroll-behavior: smooth;
}

body {
  color: #212529;
  background-color: #f1f3f5;
}

h1 {
  font-size: 6.2rem;
  display: inline-block;
  font-weight: 600;
  margin-bottom: 4.8rem;
  line-height: 1.2;
}

h2 {
  color: #212529;
  font-size: 5.2rem;
  display: block;
  font-weight: 500;
  margin-bottom: 9rem;
}

h3 {
  font-size: 3.6rem;
  font-weight: 500;
}

p {
  line-height: 1.8;
}

.container {
  margin: 0 auto;
  max-width: 190rem;
  padding: 0 4.8rem;
}

/****************************************************/
/********************** HEADER **********************/
/****************************************************/

.nav {
  margin: 0 auto;
  height: 9.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 2rem;
  background-color: #000;
  padding: 0 8rem;
  max-width: 181rem;
}

.nav-logo {
  height: 4.4rem;
  filter: invert(100%);
}

.nav-links {
  display: flex;
  flex-direction: row;
  gap: 6.4rem;
  list-style: none;
}

.nav-link,
.nav-link:link,
.nav-link:visited {
  color: #f8f9fa;
  text-decoration: none;
  transition: 0.2s;
}

.nav-link:hover,
.nav-link:active {
  color: #5c7cfa;
}

.nav-cta:link,
.nav-cta:visited {
  color: #f8f9fa;
  background-color: #364fc7;
  padding: 1.6rem 3.2rem;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.2s;
}

.nav-cta:hover,
.nav-cta:active {
  background-color: #3b5bdb;
}

/****************************************************/
/******************* HERO SECTION *******************/
/****************************************************/

.hero {
  color: #f8f9fa;
  font-weight: 400;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 8rem;
  align-items: center;
  background-color: #000;
  height: calc(98vh - 9.6rem);
  height: calc(98svh - 9.6rem);
  margin-bottom: 12.8rem;
  padding: 0 5.2rem;
  border-bottom-left-radius: 150px;
  border-bottom-right-radius: 150px;
}

.hero-text-box {
  padding-bottom: 9.6rem;
}

.sub-heading {
  font-size: 2.4rem;
  margin-bottom: 6.4rem;
}

.sr-wrapper {
  display: inline-block;
}

.hero-cta:link,
.hero-cta:visited {
  font-size: 3rem;
  color: #f8f9fa;
  display: inline-block;
  background-color: #364fc7;
  padding: 1.6rem 3.2rem;
  border-radius: 40px;
  text-decoration: none;
  transition: 0.2s;
  margin-right: 3.2rem;
}

.hero-cta:hover,
.hero-cta:active {
  background-color: #3b5bdb;
}

.learn-more:link,
.learn-more:visited {
  color: #f8f9fa;
  font-size: 3.2rem;
  display: inline-block;
  padding: 1.6rem 3.2rem;
  border-radius: 40px;
  text-decoration: none;
  transition: 0.2s;
  border: 1px solid #000;
}

.learn-more:hover,
.learn-more:active {
  border: 1px solid #868e96;
}

.hero-image {
  width: 100%;
  padding-bottom: 9.6rem
}
 <body>
    <header class="header container">
      <div class="nav">

        <a href="#">
          <img class="nav-logo" src="/images/rrlogo.png" alt="Robot logo" />
        </a>

        <ul class="nav-links" >
          <li>
            <a class="nav-link" href="#section-how">How it works</a>
          </li>

          <li>
            <a class="nav-link" href="#section-testimonials">Testimonials</a>
          </li>

          <li>
            <a class="nav-cta" href="#">Get started</a>
          </li>
        </ul>
        
      </div>
    </header>

    <main>
      <section class="section-hero">
        <div class="container" >
          <div class="hero">
            <div class="hero-text-box">
              <h1 class="headline scroll-reveal">
                Revolutionize Your Job Search With Our AI Powered Resume Builder
              </h1>
              <p class="sub-heading sr-delayed">
                Harness the power of AI and effortlessly create a high-impact,
                tailored resume that gets you noticed by top employers.
              </p>
              <div class="sr-wrapper sr-delayed-2"><a class="hero-cta" href="#">Get started</a></div>
              <div class="sr-wrapper sr-delayed-3"><a class="learn-more" href="#">Learn more</a></div>
            </div>
  
              <img
                class="hero-image sr-delayed-4"
                src="/images/robot.png"
                alt="Robot sitting at a desk typing"
              />
          </div>
        </div>
      </section>
    </main>
  </body>




/*GENERAL CSS*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  font-family: "Rubik", sans-serif;
  scroll-behavior: smooth;
}

body {
  color: #212529;
  background-color: #f1f3f5;
}

h1 {
  font-size: 6.2rem;
  display: inline-block;
  font-weight: 600;
  margin-bottom: 4.8rem;
  line-height: 1.2;
}

h2 {
  color: #212529;
  font-size: 5.2rem;
  display: block;
  font-weight: 500;
  margin-bottom: 9rem;
}

h3 {
  font-size: 3.6rem;
  font-weight: 500;
}

p {
  line-height: 1.8;
}

.container {
  margin: 0 auto;
  max-width: 190rem;
  padding: 0 4.8rem;
}

/*HEADER*/

.nav {
  margin: 0 auto;
  height: 9.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 2rem;
  background-color: #000;
  padding: 0 8rem;
  max-width: 181rem;
}

.nav-logo {
  height: 4.4rem;
  filter: invert(100%);
}

.nav-links {
  display: flex;
  flex-direction: row;
  gap: 6.4rem;
  list-style: none;
}

.nav-link,
.nav-link:link,
.nav-link:visited {
  color: #f8f9fa;
  text-decoration: none;
  transition: 0.2s;
}

.nav-link:hover,
.nav-link:active {
  color: #5c7cfa;
}

.nav-cta:link,
.nav-cta:visited {
  color: #f8f9fa;
  background-color: #364fc7;
  padding: 1.6rem 3.2rem;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.2s;
}

.nav-cta:hover,
.nav-cta:active {
  background-color: #3b5bdb;
}

/*HERO*/

.hero {
  color: #f8f9fa;
  font-weight: 400;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 8rem;
  align-items: center;
  background-color: #000;
  height: calc(98vh - 9.6rem);
  height: calc(98svh - 9.6rem);
  margin-bottom: 12.8rem;
  padding: 0 5.2rem;
  border-bottom-left-radius: 150px;
  border-bottom-right-radius: 150px;
}

.hero-text-box {
  padding-bottom: 9.6rem;
}

.sub-heading {
  font-size: 2.4rem;
  margin-bottom: 6.4rem;
}

.sr-wrapper {
  display: inline-block;
}

.hero-cta:link,
.hero-cta:visited {
  font-size: 3rem;
  color: #f8f9fa;
  display: inline-block;
  background-color: #364fc7;
  padding: 1.6rem 3.2rem;
  border-radius: 40px;
  text-decoration: none;
  transition: 0.2s;
  margin-right: 3.2rem;
}

.hero-cta:hover,
.hero-cta:active {
  background-color: #3b5bdb;
}

.learn-more:link,
.learn-more:visited {
  color: #f8f9fa;
  font-size: 3.2rem;
  display: inline-block;
  padding: 1.6rem 3.2rem;
  border-radius: 40px;
  text-decoration: none;
  transition: 0.2s;
  border: 1px solid #000;
}

.learn-more:hover,
.learn-more:active {
  border: 1px solid #868e96;
}

.hero-image {
  width: 100%;
  padding-bottom: 9.6rem
}

1条答案

按热度按时间

r8xiu3jd1#

看起来你所指的边框位于标题的底部，英雄部分的正上方。
要解决此问题，您可以尝试以下步骤：
将以下CSS规则添加到.nav类：

border-bottom: none;

这将删除页眉中的所有底部边框。
如果步骤1不起作用，您可以尝试将以下规则添加到.nav类：

position: fixed;

这将定位固定在屏幕上的标题，这可以防止与英雄部分的任何重叠。
如果步骤1和2不起作用，您可以尝试将.nav元素 Package 在容器元素中，并为该元素提供与.nav元素匹配的背景颜色。例如：
HTML

<div class="header-container">
  <header class="nav">
    <!-- Nav content here -->
  </header>
</div>

CSS

.header-container {
  background-color: #000;
}

我希望这对你有帮助！如果你有任何进一步的问题或者有什么我可以帮助你的，请告诉我。

赞(0）回复(0）举报 2023-04-23

css 无法摆脱边框(仅在iPhone上显示)[关闭]

1条答案

相关问题

热门标签

最新问答