Белый X отображается в сером поле во всех браузерах, кроме Safari на iPad. Я сделал ошибку или Safari? - PullRequest
1 голос
/ 29 февраля 2020

В Safari на Ipad белый X появляется в правой части черного цвета. Это единственный Safari, который у меня есть, хотя я так не уверен, если проблема iPad или Safari или моя проблема.

https://jsfiddle.net/juvpxa8q/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
    <title>title</title>
</head>
<body>
    <div id="main">
        <div id="piece-info-container">
            <div id="piece-info">
                <div id="piece-info-top">
                    <div class="piece-info-row">
                        <i id="close-piece-info" class="fa fa-window-close unselectable" aria-hidden="true">X</i>
                    </div>
            </div>
        </div>
        </div>
        </div>
</body>
</html>

1 Ответ

3 голосов
/ 03 марта 2020

Добавить position: relative к #piece-info-container.

Это связано со сбросом позиций детей.


Если честно, было бы лучше переосмыслить ваш CSS с нуля, потому что position:absolute внутри sticky внутри fixed - это рецепт для неприятностей.

Очень часто хочется расположить значки в верхнем правом углу. ... Хорошее место для начала - взглянуть на модалы Bootstrap . Посмотрите на разделение .modal-header и используйте float, чтобы расположить x вправо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...