Fehler, wenn man die absolute position und die Prozentsätze, um vertikal zentrieren div Kind
Ich habe ein div, dass ist mein "popup", dass ich animieren zu zeigen, bis in die direkte Mitte des übergeordneten div. Also ich bin mit absoluter Positionierung, negative Margen, und Links+oben zu positionieren Sie es so, dass ich einfach so animieren, dass er mit -webkit-transform: translateY(-100%)
auf hover. Funktioniert auf Safari und Mobile Safari.
Wenn Sie Pixel in Chrome oder Firefox funktioniert es einwandfrei, selbst wenn Sie alle Prozentzahlen, sondern das übergeordnete div-Breite mit Pixel wird es funktionieren. ABER, wenn Sie alle Prozentzahlen FF+Chrome zu gehen scheint, komplett Etagenbett und machen die Prozentsätze basierend auf etwas, das ich nicht herausfinden können.
Fiddle-Beispiel: Diese Ansicht in Safari und FF/Chrome zu sehen, dass Safari rendert #pixels
genau das gleiche wie #percents
ist und gerendert werden soll in beiden. Ist es Safari-das ist die Erbringung dieses dann falsch?
<div class="container">
<div class="pretendImage"></div>
<div id="percents"></div>
</div>
und mein CSS:
#percents {
width:100%;
height:100%;
position:absolute;
top:50%;
left:50%;
margin:-50% 0 0 -50%;
}
.container {
position:relative;
width:50%;
height:auto;
}
.pretendImage {
width:200px;
height:200px;
}
Nun fand ich einen workaround, indem Sie eine zusätzliche wrapper. Ich würde noch gerne wissen, welche Ursachen dies aber nicht.
Mein workaround: Fiedel Verwendet ein wrapper um zu vermeiden, dass die Berechnung der Spitze+Ränder der inneren div, verwendet 80% der Breite/Höhe.
- Alexander, Sie möchten, dass der div(in Prozent) in der Mitte des div(pretendImage) oder div(container)?
- Sorry das div(pretendImage) war einfach zu erweitern, div(container) in meinem Beispiel und zeigen die Wirkung, die es hat, wenn ich Pixel statt Prozent. In meinem code img(pretendImage) ist
width:100%; height:auto
ist und daher die gleiche Größe wie das div(container), die ich wollte, div(in Prozent) zentriert werden, wie in meinem workaround habe ich aktualisiert.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Höhe und top-Prozentwerte werden relativ zur Höhe des enthaltenden Blocks - d.h. das div mit der Klasse "container". Die enthaltenden block die Höhe bestimmt sich nach der Höhe des div mit der Klasse "pretendImage".
Width, left und margin-left Prozentangaben sind relativ zur Breite des enthaltenden Blocks - d.h. das div mit der Klasse "container". Die enthaltenden block die Breite ist festgelegt als Prozentsatz seiner mit-block, der in der jsfiddle Fall ist der erste mit block, der selbst die gleiche wie die Breite des Viewports. Dies ist nicht, wie Sie der Berechnung der Prozentsätze, die Sie denken, Sie brauchen. Sie können damit umgehen, indem schrumpfen das element, welches
position:relative
(verwenden Siedisplay:inline-block;
oderfloat:left;
) und erstellen Sie einen anderen wrapper-div außerhalb, dass der Platz der Elemente in den Arbeitsbereich.Das seltsame ist das margin-top (und margin-bottom) die Prozentsätze. Diese sind im Vergleich zu den Breite der container-block. Dies ist nicht hilfreich, und es gibt wenig, was kann getan werden, es sei denn, die mit block hat einen bekannten und festen Seitenverhältnis, in dem Fall könnte man berechnet den prozentualen Wert der Höhe benötigt, die von der Breite und dem Seitenverhältnis.
Keine Ahnung, was Safari macht, aber es klingt ernst buggy.
margin-top:-40%
ist? Während normalerweise sollte es mit der Breite des übergeordneten div-Referenz? Ich hatte keine Ahnung, dass es Verweis auf die Breite des übergeordneten Elements ist, meiner Meinung nach Safari ' s Methode macht mehr Sinn, da sich die oberen/unteren Rand befassen sich mit Höhe sollten Sie betroffen sein von der Höhe, wenn mit Prozent. Cross-browser-Problemen wie diesem wird der Tod von mir.Hier ist, was funktioniert bei mir auf allen getesteten Browsern und mobilen Geräten (Chrome, IE, Firefox, Safari, iPad, iphone 5 und 6, Android).
Ich denke, Sie müssen nur sicherstellen, dass hinzufügen, um die gesamte Gruppe von transform-Regeln unten, um die Abdeckung für alle Szenarien.