SVG 在 Safari 中没有正确对齐

Question

I'm using a mixture of text and SVG elements to create pagination for a site I'm working on. However, in Safari the SVGs display vertically off-centre.

Firefox:

Safari:

What could be causing this?

Here's the code I'm using to create this:

 body { background: #353535; } .facetwp-pager, .mv-pagination { text-align: center; margin: 15px auto 40px; } .facetwp-page, .pager, .pager svg { display: inline-block; font-size: 16px; height: 30px; width:31px; line-height: 30px; overflow: hidden; } .facetwp-page, .pager { display: inline-block; margin-right: 6px; cursor: pointer; color: #bbbbbb; } .facetwp-page.pager path { fill: #b7b7b7; -webkit-transition: fill 0.25s; -moz-transition: fill 0.25s; transition: fill 0.25s; } .facetwp-page.pager:hover path { fill: #FFF; } .pager.inactive { cursor: default; } .pager.inactive path { fill: #232323; } .pager.inactive:hover path { fill: #232323; } .facetwp-page.current { color: #2fe3c4; position: relative; } .facetwp-page.current:before { border: 1px solid #2fe3c4; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; content: " "; display: block; height: 28px; left: 0; position: absolute; width: 28px; } .facetwp-pager-label { display: inline-block; margin-right: 12px; }

 <div class="facetwp-pager"> <a class="facetwp-page pager" data-page="1"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="45.5" height="45.5" viewBox="0 0 45.5 45.5" enable-background="new 0 0 45.543 45.543" xml:space="preserve"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 22.8c0 12.6 10.2 22.8 22.8 22.8 12.6 0 22.8-10.2 22.8-22.8C45.5 10.2 35.3 0 22.8 0 10.2 0 0 10.2 0 22.8zM13.7 22.8c0-0.6 0.2-1.2 0.7-1.6l0.3-0.3c0 0 0.1-0.1 0.1-0.1l9.2-9.2c0.9-0.9 2.4-0.9 3.3 0l0.3 0.3c0.9 0.9 0.9 2.4 0 3.3l-7.7 7.7 7.7 7.7c0.9 0.9 0.9 2.4 0 3.3L27.2 34c-0.9 0.9-2.4 0.9-3.3 0l-9.2-9.2c0 0-0.1-0.1-0.1-0.1l-0.3-0.3C13.9 24 13.7 23.4 13.7 22.8z"></path> </svg> </a> <a class="facetwp-page" data-page="1">1</a> <a class="facetwp-page current" data-page="2">2</a> <a class="facetwp-page" data-page="3">3</a> <a class="facetwp-page" data-page="4">4</a> <a class="facetwp-page pager" data-page="3"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="45.5" height="45.5" viewBox="0 0 45.5 45.5" enable-background="new 0 0 45.543 45.543" xml:space="preserve"> <path fill-rule="evenodd" clip-rule="evenodd" d="M22.8 0C10.2 0 0 10.2 0 22.8c0 12.6 10.2 22.8 22.8 22.8 12.6 0 22.8-10.2 22.8-22.8C45.5 10.2 35.3 0 22.8 0zM31.2 24.4l-0.3 0.3c0 0-0.1 0.1-0.1 0.1l-9.2 9.2c-0.9 0.9-2.4 0.9-3.3 0L18 33.7c-0.9-0.9-0.9-2.4 0-3.3l7.7-7.7 -7.7-7.7c-0.9-0.9-0.9-2.4 0-3.3l0.3-0.3c0.9-0.9 2.4-0.9 3.3 0l9.2 9.2c0 0 0.1 0.1 0.1 0.1l0.3 0.3c0.5 0.4 0.7 1 0.7 1.6C31.9 23.4 31.7 24 31.2 24.4z"></path> </svg> </a> </div>

Answer 1

Kind of old, but try adding vertical-align: middle; to

.facetwp-page, .pager {
    display: inline-block;
    margin-right: 6px;
    cursor: pointer;
    color: #bbbbbb;
}