Question

我有一个问题，其中在代码中包含svg会破坏在其他浏览器中有效的链接。以下代码可在IE11中使用：

                <span class="login-user-name" *ngIf="isLoggedIn">
                <a href="/auth/change-password" title="Change Password" attr.aria-label="Change Password Link">                        
                    Change your password
                </a>
                {{(user | async).displayName}}
            </span>

但是，以下内容适用于其他浏览器，但不适用于IE11。令我感到惊讶的是，我无法在SO和google上找到有关SVG无法在IE11的标记内工作的相关结果：

<span class="login-user-name" *ngIf="isLoggedIn">
<a [routerLink]="['/auth/change-password']" title="Change Password" attr.aria-label="Change Password Link">
    <svg-icon class="medium-gray tiny" icon="icon-torso" aria-hidden="true"></svg-icon>
</a>
{{(user | async).displayName}}
</span>

Answer 1

我并不完全理解这种“为什么”，但是其他开发人员之一通过简单地用标记代替来解决了这个问题。他唯一的评论是“内联元素与嵌套项目一起工作的方式”。

<div class="login-user-name" *ngIf="isLoggedIn">
<a class="change-password" [routerLink]="['/auth/change-password']" title="Change Password" attr.aria-label="Change Password Link">
    <svg-icon class="medium-gray tiny" icon="icon-torso" aria-hidden="true">
    </svg-icon>
</a>
{{(user | async).displayName}}
</div>

SVG图标中断IE11锚标记

1 个答案: