Почему Firefox трактует этот отрицательный верхний предел иначе, чем Opera? - PullRequest
Новая
       48

Почему Firefox трактует этот отрицательный верхний предел иначе, чем Opera?

0 голосов
/ 07 апреля 2020

Я условно отображаю 3 или 4 строки элементов "location": 

 <div style={container}>
            <img src={map} style={bgrImg}/>
            <div style={verticalCenter}>
                <div style={leftMargin}>
                    <div style={locationStyle} className="d-flex flex-row position-relative">
                        <br/>
                        {locations !== null && locations.line4.map((location, i) => {
                            if (location === "empty") {
                                return <div key={"empty" + i} style={empty}></div>
                            } else {
                                return (
                                    <div key={"locationLine1-" + i}>
                                        <Location location={Locations[location.id]} idLocation={location}/>
                                    </div>
                                )
                            }
                        })
                        }
                    </div>
                </div>
                <div style={locationStyle} className="d-flex flex-row position-relative">
                    <br/>
                    {locations !== null && locations.line3.map((location, i) =>
                        <div key={"locationLine1-" + i}>
                            <Location location={Locations[location.id]} idLocation={location}/>
                        </div>
                    )}
                </div>
                <div style={leftMargin}>
                    <div style={locationStyle} className="d-flex flex-row position-relative">
                        {locations !== null && locations.line2.map((location, i) =>
                            <div key={"locationLine1-" + i}>
                                <Location location={Locations[location.id]} idLocation={location}/>
                            </div>
                        )}
                    </div>
                </div>
                <div style={locationStyle} className="d-flex flex-row position-relative">
                    {locations !== null && locations.line1.map((location, i) =>
                        <div key={"locationLine1-" + i}>
                            <Location location={Locations[location.id]} idLocation={location}/>
                        </div>
                    )}
                </div>
            </div>
        </div>

Стиль местоположения имеет отрицательный верхний предел: 

const locationStyle = {
        marginTop: "-1.4vw",
    };

Контейнер должен центрировать все строки : 

const verticalCenter = {
        position: "absolute",
        top: "50%",
        marginTop: "-15vw",
        backgroundColor: "red"
    }

Когда отображаются три строки, результат отличается между Firefox: firefox result

и Opera opera result

Как я могу устранить разницу в поведении?

...