奇怪的 userAgent 问题导致元素移位

问题描述

这一定是一个非常简单的 HTML/CSS 跨浏览器问题，但我就是不知道为什么。

一个现场的小提琴页面对我来说更容易解释情况：https://jsfiddle.net/9gyp18f4/1，我稍后也会把代码放在这里。所以问题是，当你用 safari 打开这个 fiddle 时，第二个按钮的位置如下图所示。

我只有一台小屏幕的 Macbook air，在与这个问题斗争了几个小时后，我的大脑和眼睛都让我失望了。也许这里有人会很友好地告诉我到底是什么导致了这个问题。

TL;DR 如果有人想知道这个小提琴中的代码在做什么 - 这是一个定制的Addthis的“内联工具”，他们的微信按钮不能正常工作，所以我通过添加一个类来替换它。我使用 requestAnimationFrame 来确保在按钮的 HTML 实际加载后添加类，因为它是由 Addthis 的代码加载的。

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5eaa206a3b043d9d"></script>

HTML 很简单

<div class="addthis_inline_share_toolBox"></div>

在 Addthis 的 JS 代码将实际按钮放入其中之前。按钮的实际 HTML 有点臃肿，我把 Facebook 放在这里

<a role="button" tabindex="0" class="at-icon-wrapper at-share-btn at-svc-facebook" style="background-color: rgb(59,89,152); border-radius: 4px;"><span class="at4-visually-hidden">Share to Facebook</span><span class="at-icon-wrapper"
    style="line-height: 32px; height: 32px; width: 32px;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1" role="img" aria-labelledby="at-svg-facebook-4"
      style="fill: rgb(255,255,255); width: 32px; height: 32px;" class="at-icon at-icon-facebook">
      <title id="at-svg-facebook-4">Facebook</title>
      <g>
        <path d="M22 5.16c-.406-.054-1.806-.16-3.43-.16-3.4 0-5.733 1.825-5.733 5.17v2.882H9v3.913h3.837V27h4.604V16.965h3.823l.587-3.913h-4.41v-2.5c0-1.123.347-1.903 2.198-1.903H22V5.16z" fill-rule="evenodd"></path>
      </g>
    </svg></span></a>

为了让微信按钮按我的意愿工作，我必须删除微信按钮的 at-share-btn 类，否则点击这个按钮将触发 Addthis 的事件而不是我的。这会导致按钮的样式与其他按钮的样式略有不同，因此我放入了一些 CSS 以使其样式与其他按钮保持一致。

.wechatNativeShare{
  background:green;
  display:inline-block
}

#atstbx .wechatNativeShare{
  margin:0 2px 5px;padding:5px
}

但是，在进行这些自定义后，该按钮将无法在 Safari 上运行。我相信这个问题与我的自定义无关，除了用我的（at-share-btn）替换它的原始类（.wechatNativeShare）。听起来是个很简单的问题，对吧？但我只是找不到导致问题的原因并解决它。有人请帮助我。谢谢！

解决方法

您可以轻松使用vertical-align: top;！这应该适用于所有浏览器。

该代码段仅显示了一些错误，因此代码如下：

HTML：

<div class="addthis_inline_share_toolbox"></div>

CSS：

.wechatNativeShare{
  background:green;
  display:inline-block;
  vertical-align: top; /* This is what i added */
}

#atstbx .wechatNativeShare{
  margin:0 2px 5px;padding:5px
}

JavaScript：

function addWechatNativeShare(){

  let $ = jQuery;
    
  if ($('#atstbx .at-svc-wechat').length === 0) {
    console.log($('#atstbx .at-svc-wechat').length);
    requestAnimationFrame(addWechatNativeShare);
  }
  $('#atstbx .at-svc-wechat').removeClass('at-share-btn').addClass('wechatNativeShare');
}

requestAnimationFrame(addWechatNativeShare);