Android Browser erstreckt sich Bild

Question

Die Website, über die ich spreche is currently live. Es funktioniert ganz gut für mich. Es gibt nur einen Fehler, der mich verrückt macht:

Auf dem Standard Android Browser (getestet auf 4.1.2, LG), wird das Logo auf eine sehr schlechte Weise gestreckt und verkleinert. Sie können eine Demo unten sehen.

Die CSS für die Positionierung und das Logo Dimensionierung ist ganz einfach, position: absolute auf einem position: fixed Element mit:

Markup

<div class="fixed"> 
    <div id="logo"> 
     <a href="logo-link"> 
     <img src="logo.jpg" height="55" width="34"> 
     </a> 
    </div> 
</div> 

CSS:

* {box-sizing: border-box} /* bootstrap system */ 

.fixed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: auto; 
    bottom: auto; 
    height: 85px; 
} 

.logo { 
    width: 85px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: auto; 
    bottom: auto; 
} 

img { 
    margin: 20px 27px; 
    max-width: 40px; 
    height: auto; 
    display: inline-block; 
} 

Answer 1

Mein FF DE44 + Inspektor sagt, dass das Eltern <a> Größe 0x24 ist und die <img> Größe 240x164 (die Inline-Werte sind). Der Elternteil hat keine z-index, während das Bild z-index: 1500 hat.

Es scheint mir, dass der Android-Browser keine Breite und Höhe Elternwerte hat, die es verweisen kann, während die bottom: auto und right: auto zwingt es zu tun.

Weiter, wenn man sich den Code der "Live" -Seite anschaut, gibt es mehr, als man in Ihrer Frage behauptet, weil Sie die Werte des kleinen Bildes angeben, aber das CSS des großen (was auch hat left: auto, während der kleine hat keinen Boden, links, rechts überhaupt).

Sie sollten Ihren Code besser überprüfen und den Code in Ihrer Frage überarbeiten, um den Code der 'Live'-Version widerzuspiegeln, sonst können wir Ihnen nicht richtig helfen.

Answer 2

Blind arbeiten, weil ich diesen Browser nicht habe, aber ich vermute, das Problem wird das richtige sein: auto bottom: auto.

.fixed { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 85px; 
} 

#logo { 
    width: 85px; height:85px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color:pink; 
} 
#logo a { display:block; width: 85px; height:85px; } 

img { margin:15px 25px; } 

Da die Breite bekannt ist, versuchen Sie, Auto mit den tatsächlichen Nummern zu ersetzen. Hier

ist ein Fiddle: https://jsfiddle.net/mnkx66zj/

Sie sollten auch, indem Logo-Link Anzeigeblock den klickbaren Bereich auf Ihren Link erhöhen wollen, und machen es gleich Mutter Größe.