Question

我在这里有示例代码。这在chrome，edge，firefox中完美工作。但这似乎是IE中的问题。我使用IE11。

<div class="text">
<span>
   <svg xmlns="http://www.w3.org/2000/svg" class="image" viewBox="0 0 512 512"><path  d="M 417.1 509.3 h -0.4 c -3.5 -0.3 -6.5 -1.8 -8.7 -4.3 c -2.2 -2.6 -3.3 -5.8 -3.1 -9.3 v -0.2 l 6.3 -49.2 C 366.1 485.4 308.4 507 248.5 507 c -9.7 0 -19.7 -0.6 -29.4 -1.8 c -65.8 -7.9 -124.6 -40.9 -165.5 -93.1 C 14.1 361.7 -3.9 297.6 3 231.7 c 0.1 -1.3 0.3 -2.6 0.4 -3.9 c 0.3 -3 1.4 -5.6 3 -8 c 3.4 -5 8.9 -7.9 14.9 -7.9 c 0.7 0 1.5 0 2.2 0.1 c 4.8 0.5 9.1 3 12.1 6.8 c 3 3.7 4.2 8.4 3.8 13 v 0.3 c -0.1 1.1 -0.2 2.2 -0.4 3.3 c -5.9 56.5 9.4 111.4 43.1 154.3 c 35 44.5 85.2 72.8 141.5 79.5 c 8.4 1 16.8 1.5 25.2 1.5 c 51.4 0 100.9 -18.6 139.5 -52.3 c 1.6 -1.4 3.1 -2.7 4.7 -4.1 l -60.6 -1.5 h -0.2 c -4.5 -0.3 -8.8 -2.3 -11.4 -5.3 c -1.8 -2.1 -2.7 -4.8 -2.4 -7.4 v -0.2 l 0.2 -5.4 v -0.4 c 0.3 -2.1 1.1 -4.1 2.3 -5.9 c 2.6 -3.8 7.1 -6.2 11.6 -6.2 h 0.5 l 96.1 2.6 h 0.4 l 6.3 0.3 c 3.6 0.2 6.8 1.7 9.1 4.4 c 2.3 2.6 3.4 6 3.1 9.6 l -0.6 6.3 l -0.1 0.4 l -11.6 93.7 c -0.2 2.2 -1 4.2 -2.1 5.8 c -2.2 3.3 -6 5.2 -10.6 5.2 h -1 l -4.9 -1 Z m 75.2 -210.7 c -0.7 0 -1.5 0 -2.1 -0.1 c -9.7 -1.2 -16.8 -10 -15.8 -19.8 v -0.3 c 0.1 -1 0.2 -2 0.3 -3.1 c 5.8 -55.1 -9.9 -109.4 -44.2 -153.1 c -35 -44.5 -85.2 -72.8 -141.4 -79.5 c -8.9 -1.1 -17.8 -1.6 -26.5 -1.6 c -20.6 0 -41 3 -60.7 8.8 c -28.4 8.5 -54.1 22.6 -76.5 42.1 c -5 4.3 -9.7 8.9 -14.3 13.6 l 61.4 1.5 h 0.2 c 4.2 0.3 8.4 2.3 10.9 5.3 c 2.5 2.9 2.9 5.8 2.6 7.8 v 0.3 l 0.1 5 l -0.1 0.6 c -0.3 2 -1.1 4 -2.2 5.7 c -2.6 3.8 -7.1 6.2 -11.6 6.2 h -0.6 l -96.1 -2.6 h -0.3 l -6.5 -0.3 c -3.6 -0.2 -6.8 -1.7 -9.1 -4.4 c -2.3 -2.6 -3.4 -6 -3.1 -9.6 l 0.6 -6.3 l 0.1 -0.4 L 69 20.7 c 0.2 -2.2 1.1 -4.3 2.3 -6.1 c 2.5 -3.7 6.7 -6 11.1 -6.2 h 1.1 l 5 1.2 h 0.4 c 2.9 0.2 5.3 1.6 7.3 3.8 c 2.4 2.9 3.8 7.2 3.5 11.2 v 0.3 l -6 47.3 c 2.6 -2.5 5.3 -5 7.9 -7.3 C 127.9 42 158 25.4 191.2 15.4 C 214.3 8.5 238.3 5 262.5 5 c 10.2 0 20.6 0.6 30.9 1.9 C 359.2 14.7 418 47.8 458.9 100 c 40.1 51.1 58.5 114.6 51.7 179.1 c -0.1 1.3 -0.3 2.4 -0.4 3.7 c -0.3 2.9 -1.4 5.6 -3 8 c -3.4 4.8 -9 7.8 -14.9 7.8 Z" /></svg>
    sample text after the svg image
</span>
</div>

<style>
.text{
    margin: 55px 0px;
    width: 70%;
}
.image {
    width: 15px;
    margin-right: 10px;
}
</style>

我希望它在chrome中显示相同的输出。

Answer 1

我修复了您在IE中的问题

.text{
    margin: 55px 0px;
    width: 70%;
}
.image {
    width: 15px;
    margin-right: 10px;
    vertical-align: middle;
}

<div class="text">
<span>
    <svg xmlns="http://www.w3.org/2000/svg" class="image" viewBox="0 0 512 512"><path  d="M 417.1 509.3 h -0.4 c -3.5 -0.3 -6.5 -1.8 -8.7 -4.3 c -2.2 -2.6 -3.3 -5.8 -3.1 -9.3 v -0.2 l 6.3 -49.2 C 366.1 485.4 308.4 507 248.5 507 c -9.7 0 -19.7 -0.6 -29.4 -1.8 c -65.8 -7.9 -124.6 -40.9 -165.5 -93.1 C 14.1 361.7 -3.9 297.6 3 231.7 c 0.1 -1.3 0.3 -2.6 0.4 -3.9 c 0.3 -3 1.4 -5.6 3 -8 c 3.4 -5 8.9 -7.9 14.9 -7.9 c 0.7 0 1.5 0 2.2 0.1 c 4.8 0.5 9.1 3 12.1 6.8 c 3 3.7 4.2 8.4 3.8 13 v 0.3 c -0.1 1.1 -0.2 2.2 -0.4 3.3 c -5.9 56.5 9.4 111.4 43.1 154.3 c 35 44.5 85.2 72.8 141.5 79.5 c 8.4 1 16.8 1.5 25.2 1.5 c 51.4 0 100.9 -18.6 139.5 -52.3 c 1.6 -1.4 3.1 -2.7 4.7 -4.1 l -60.6 -1.5 h -0.2 c -4.5 -0.3 -8.8 -2.3 -11.4 -5.3 c -1.8 -2.1 -2.7 -4.8 -2.4 -7.4 v -0.2 l 0.2 -5.4 v -0.4 c 0.3 -2.1 1.1 -4.1 2.3 -5.9 c 2.6 -3.8 7.1 -6.2 11.6 -6.2 h 0.5 l 96.1 2.6 h 0.4 l 6.3 0.3 c 3.6 0.2 6.8 1.7 9.1 4.4 c 2.3 2.6 3.4 6 3.1 9.6 l -0.6 6.3 l -0.1 0.4 l -11.6 93.7 c -0.2 2.2 -1 4.2 -2.1 5.8 c -2.2 3.3 -6 5.2 -10.6 5.2 h -1 l -4.9 -1 Z m 75.2 -210.7 c -0.7 0 -1.5 0 -2.1 -0.1 c -9.7 -1.2 -16.8 -10 -15.8 -19.8 v -0.3 c 0.1 -1 0.2 -2 0.3 -3.1 c 5.8 -55.1 -9.9 -109.4 -44.2 -153.1 c -35 -44.5 -85.2 -72.8 -141.4 -79.5 c -8.9 -1.1 -17.8 -1.6 -26.5 -1.6 c -20.6 0 -41 3 -60.7 8.8 c -28.4 8.5 -54.1 22.6 -76.5 42.1 c -5 4.3 -9.7 8.9 -14.3 13.6 l 61.4 1.5 h 0.2 c 4.2 0.3 8.4 2.3 10.9 5.3 c 2.5 2.9 2.9 5.8 2.6 7.8 v 0.3 l 0.1 5 l -0.1 0.6 c -0.3 2 -1.1 4 -2.2 5.7 c -2.6 3.8 -7.1 6.2 -11.6 6.2 h -0.6 l -96.1 -2.6 h -0.3 l -6.5 -0.3 c -3.6 -0.2 -6.8 -1.7 -9.1 -4.4 c -2.3 -2.6 -3.4 -6 -3.1 -9.6 l 0.6 -6.3 l 0.1 -0.4 L 69 20.7 c 0.2 -2.2 1.1 -4.3 2.3 -6.1 c 2.5 -3.7 6.7 -6 11.1 -6.2 h 1.1 l 5 1.2 h 0.4 c 2.9 0.2 5.3 1.6 7.3 3.8 c 2.4 2.9 3.8 7.2 3.5 11.2 v 0.3 l -6 47.3 c 2.6 -2.5 5.3 -5 7.9 -7.3 C 127.9 42 158 25.4 191.2 15.4 C 214.3 8.5 238.3 5 262.5 5 c 10.2 0 20.6 0.6 30.9 1.9 C 359.2 14.7 418 47.8 458.9 100 c 40.1 51.1 58.5 114.6 51.7 179.1 c -0.1 1.3 -0.3 2.4 -0.4 3.7 c -0.3 2.9 -1.4 5.6 -3 8 c -3.4 4.8 -9 7.8 -14.9 7.8 Z" /></svg>
    <span>sample text after the svg image</span>
</span>
</div>

IE中的SVG垂直对齐问题

1 个答案: