html - mac 和 windows FF/Chrome 之间的相同父 div 的顶部位置绝对不同

Question

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

HTML:

<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 -->

CSS:

#scroller {
    height: 50px;
    list-style-type: none;
    overflow: hidden;
    margin: 0;
    position: absolute;
    top: 173px;
    left: 207px;
    z-index: 1;
    font-family: helvetica-neue, helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 34px;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);

    @media #{$ipad-l}{
      left: 220px;
    }

    @media #{$ipad-p}{
      left: 150px;
      top: 175px;
      height: 25px;
      font-size: 22px;
    }

    li{
      height: 50px;
      text-align: center;
      width: 305px;
      color:#08E700;

        @media #{$ipad-p}{
            width: 210px;
        }
    }
}

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