Question

我用其他解决方案读过不同的人，但都没有回答我的奇怪问题。正如您在link上所观察到的那样，绿色文本（#scroller）是绝对位置并且top: 173px;要将其与文本的其余部分对齐，我需要将顶部元素放置到{ {1}}。所以它有6px的差异。我该怎么做才能解决这个问题？疯了......

HTML：

top:167px

CSS：

<div class="wrapper">
            <ul id="scroller">
                <li>Sustainable</li>
                <li>Eye Catching</li>
                <li>Modern Design</li>
                <li>Retail &amp; Pop-Up</li>
                <li>Sports-themed</li>
                <li>Event Space</li>
                <li>Bar/Restaurant</li>
                <li>Urban Living</li>
            </ul>
            <q>
              <span class="q-line"><strong>CEPODS</strong> are <!-- Retail &amp; Pop-Up  --><span class="word-mask"></span> Environments.</span>
              <span class="q-line">We repurpose Shipping Containers.</span>
              <span class="q-line lower"><strong>CEPODS</strong></span>
              <span class="q-line lower">...Container Evolution<span class="registered">®</span></span>
            </q>
<header>
    <nav>
        <a href="index.php">
            <h1 class="sprites-logo-cepods ir">cepods</h1>
        </a>
        <ul class="main-nav">
            <li>
                <a href="about.php">about</a>
            </li>
            <li>
                <a href="how-we-work.php">how we work</a>
            </li>
            <li class="dropli">
                <a href="design.php">design<i class="icon-right-open-gal"></i></a>
                <ul class="sub-nav">
                    <li>
                        <a href="design-bar.php">bar</a>
                    </li>
                    <li>
                        <a href="design-retail-space.php">retail space</a>
                    </li>
                    <li>
                        <a href="design-restaurant.php">restaurant</a>
                    </li>
                    <li>
                        <a href="design-event-service.php">event service</a>
                    </li>
                    <li>
                        <a href="design-living.php">living</a>
                    </li>
                    <li>
                        <a href="design-custom.php">custom</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="news.php">news</a>
            </li>
            <li>
                <a href="faq.php">faq</a>
            </li>
        </ul>
    </nav>
</header>
</div><!-- End wrapper -->

Answer 1

只需2个css即可修复。

#scroller li {
  color: #08E700;
  height: 41px; /*  <-- this height was not right, (previous 50) should be same has background line height */
  text-align: center;
  width: 305px;
}

#scroller {
  font-family: helvetica-neue,helvetica,sans-serif;
  font-size: 34px;
  height: 41px;  /*  <-- this height was not right, (previous 50) should be same has background line height */
  left: 207px;
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  position: absolute;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  top: 167px;  /* <-- this was : 173px */
  z-index: 1;
}

顶部位置与mac和Windows FF / Chrome之间的相同父div完全不同

1 个答案: