HTML / CSS Различное форматирование в Safari и Chrome
Я тоже искал ответ для этого. Если вам посчастливилось прицелиться в IE8 и выше, вы можете использовать display:table и соответствующие значения для получения правил рендеринга таблиц с элементами уровня блока, включая div.
Если вам даже повезло и ваши пользователи используют браузеры верхнего уровня (например, если это приложение интрасети на компьютерах, которыми вы управляете, например, мой последний проект), вы можете использовать новый макет гибкой коробки в CSS3!
2 ответа
Для выравнивания центра контейнера необходимо добавить следующий стиль:
#outer{
height: 100%;
width: 550px;
display: flex;
justify-content: center;
margin-top: 20px;
display: -webkit-box;
-webkit-box-pack: center; /* justify-content */
-webkit-box-align: center; /* align-items */
}
#inner{
position: relative;
background-color: #696969;
opacity: .5;
height: 100%;
width: 370px;
}
Надеюсь, что изменения помогут. Попробуйте этот код и дайте мне знать, если какие-либо проблемы
Это, скорее всего, потому что эти два браузера имеют разные правила CSS по умолчанию, я бы рекомендовал использовать сброс CSS, либо использовать https://meyerweb.com/eric/tools/css/reset/ или https://github.com/necolas/normalize.css/
Если вы не знакомы с этими сбросами CSS - они в основном нормализуют стили браузера по умолчанию. Я лично предпочитаю использовать normalize.css во всех моих проектах.