/ / Výška sa počíta rozdielne medzi prehliadačmi Chrome a Firefox? - javascript, css

Výška sa vypočítava odlišne medzi Chrome a Firefoxom? javascript, css

Tak sa na to pozri www.qualificationcheck.com v prehliadačoch Chrome aj Firefox. Alt-tab rýchlo medzi sebou a späť zameraním na malú zelenú kartu "pomoc a spätná väzba".

Zdá sa, že presunie pozíciu! Kto to je?

Je súčasťou súboru Javascript tretej strany. Pozrel som sa do toho, aby som zistil, ako vypočítava svoju pozíciu.

Najprv nastaví top: 50% aby sme ho dostali zhruba z 50%.

Potom to zapadne

margin-top: [ "-",Math.round(tab.dimensions.height / 2), "px" ].join("")

tj mínus polovica výšky záložky, takže sa mierne posunie späť nahor, takže jej „stred“ je v skutočnosti 50% cesty nad výrezom (skôr ako „horný“).

Pomocou nástrojov pre vývojárov prehliadača Chrome a následným firebugom vo Firefoxe vidím, že v prehliadači Chrome končí okraj-top -33px, zatiaľ čo v prehliadači Firefox to -87px.

Prečo je to rozdiel?

Je to nepríjemné, pretože chcem pridať svoju vlastnú kartu nad alebo pod ňu, ale dokážem určiť, kam umiestniť svoju vlastnú kartu, ak sa nemôžem spoľahnúť na to, že niekto z tretích strán bude stále na rovnakej pozícii!

odpovede:

1 pre odpoveď č. 1

Ľutujeme, chlapci, ani jedna z ďalších odpovedí nepomohla.

Vyriešil som to v podstate skopírovaním tretej strany js a následným vylepšením, aby som ju mohol umiestniť spolu s mojou novou kartou ako jednu.

Takže v podstate ide len o prácu, nie o odpoveď na problém.


0 pre odpoveď č. 2

Skúste pridať výplň:? Px a mala by byť rovnaká pre prehliadače Firefox aj Chrome. Niektorí ľudia na internete hlásia podobný problém s kolapsom (pravdepodobne nie chyba):

http://www.sitepoint.com/forums/showthread.php?829681-CSS-margins-displaying-differently-on-Firefox-Ie-Chrome

Margin Rozdiely medzi prehliadačmi Firefox a Chrome / Safari


0 pre odpoveď č. 3

Firefox (a Chrome od nedávna) interpretuje okraj a výplň inak. Marže a výplňové hodnoty sú pridané do výšky / šírky div, Môžete to vyriešiť (prinajmenšom pre FF) tak, že to pridáte do svojho CSS (umiestnite ho hore):

DIV {
-moz-box-sizing:border-box;
box-sizing:border-box;
}