Question

希望有人可以告诉我这里发生的事情。

我有两个应用程序徽章（Apple和Google）使用以下代码分别放置在Bootstrap 4标签中：

<ul class="nav nav-pills" id="2faTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" role="tab" href="#freeOTP" aria-controls="freeOTP" aria-selected="true">FreeOTP></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" role="tab" href="#authy" aria-controls="authy" aria-selected="false">Auty</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" role="tab" href="#google" aria-controls="google" aria-selected="false">Google Authenticator</a>
    </li>
</ul>
<div class="tab-content mt-3" id="2faTabContent">
    <div class="tab-pane fade show active" id="freeOTP" role="tabpanel" aria-labelledby="freeOTP-tab">
        <div class="label">FreeOTP</div>
        <a href="https://freeotp.github.io/" target="_blank">https://freeotp.github.io</a>
        <div class="mt-2">
            <a href="https://itunes.apple.com/us/app/freeotp-authenticator/id872559395" target="_blank"><svg>Apple badge SVG</svg></a>
            <a href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp" target="_blank"><svg>Google badge SVG</svg></a>
        </div>
    </div>
    <div class="tab-pane fade" id="authy" role="tabpanel" aria-labelledby="authy-tab">
        <div class="label">Authy</div>
        <a href="https://authy.com/" target="_blank">https://authy.com</a>
        <div class="mt-2">
            <a href="https://itunes.apple.com/us/app/authy/id494168017" target="_blank"<svg>Apple badge SVG</svg></a>
            <a href="https://play.google.com/store/apps/details?id=com.authy.authy" target="_blank"><svg>Google badge SVG</svg></a>
        </div>
    </div>
    <div class="tab-pane fade" id="google" role="tabpanel" aria-labelledby="google-tab">
        <div class="label">Google Authenticator</div>
        <a href="https://www.google.com/landing/2step/" target="_blank">https://www.google.com/landing/2step</a>
        <div class="mt-2">
            <a href="https://itunes.apple.com/us/app/google-authenticator/id388497605" target="_blank"><svg>Apple badge SVG</svg></a>
            <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2" target="_blank"><svg>Google badge SVG</svg></a>
        </div>
    </div>
</div>

当我单击除初始活动选项卡之外的其他选项卡时，Google徽标（徽标）的一部分会消失。在Chrome和Firefox中发生。

GIF

jsfiddle

为什么会这样？为什么只有Google徽章受到影响？我该如何解决健康问题？

SVG的一部分在Bootstrap（4）选项卡更改中消失了

0 个答案: