Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

bugg, nån? inline svg i Safari vill inte centreras konsekvent

1
Skriv svar
Permalänk
Medlem ★
●

bugg, nån? inline svg i Safari vill inte centreras konsekvent

Är det nån som känner till om det finns en quirk i Safari som gör att inline images inte centreras korrekt?
I det här fallet är det svg, <figure><img></figure>. img=display table.
Oftast hamnar den rätt men ibland hamnar den lite off till vänster. Det händer bara i Safari. På Macdator, Ipad Pro och i simuleringsläge i browsern. I Chrome/Firefox/IE centreras den korrekt hela tiden.

<div class="wp-block-image">
<figure class="aligncenter size-large">
<img src="http://example.com/images/1.svg" alt="" class="" data-src="http://example.com/images/1.svg">
<noscript>
<img src="http://example.com/images/1.svg" alt=""/>
</noscript>
</figure>
</div>

.wp-block-image {
    max-width: 100%;
    margin-bottom: 1em;
}

.wp-block-image .aligncenter {
    margin-left: auto;
    margin-right: auto;
}
.wp-block-image .aligncenter {
    display: table;
}
.aligncenter {
    clear: both;
}

figure {
    margin: .5em 0;
}

.wp-block-image img {
    max-width: 100%;
}
img {
    display: block;
    height: auto;
}
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Koden du skickade med räcker inte riktigt för att kunna hjälpa dig.

Jag föreslår att du skapar en minimal HTML-fil som test-case. Utgå från din riktiga sida och ta bort allt som är onödigt. Många gånger hittar man problemet själv medan man gör detta! Annars kan du posta resultatet här, och så kan någon annan utgå från det och försöka lösa problemet.

Btw, du har ingen ”inline SVG” i ditt exempel. Inline SVG är när du kopierar innehållet i en .svg-fil och klistrar in det rakt in i HTML-koden. I ditt exempel använder du <img src="foo.svg"> vilket är motsatsen till inlining.

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara