Как сделать мой HTML/CSS-код совместимым во всех браузерах? Работает в Chrome, не работает в Safari/Edge и т. д. ⇐ CSS

[Anonymous]

Мой веб-сайт размещен на bluehost, и когда я захожу по адресу в Chrome, все работает идеально. Когда я захожу на адрес Safari, раздел обо мне не имеет черного фона, а нижний колонтитул выдвинут вверх и находится не в том месте.

См. ссылку ниже в Safari.

Morganalexisdesigns.com

Я попробовал создать CSS. сбросил настройки, но все, что он сделал, это изменил CSS для моего сайта.
html,body { поле: 0 пикселей; отступ: 0 пикселей; переполнение-х: скрыто; } тело { семейство шрифтов: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", «Гельветика, Ариал», «Люсида Гранде», «без засечек»; } тело { фоновое изображение: url("assets/background.jpg"); размер фона: обложка; фоновая позиция: центр; фоновый повтор: без повтора; цвет: #000000; } /* 1920x1080 */ /* НАВБАР */ /* Равномерно распределить компоненты навигационной панели */ .navbar-nav > ли { отступ слева: 125 пикселей; отступ справа: 125 пикселей; поле справа: 0; поле слева: 0; } .navbar { цвет фона: #000000; выравнивание текста: по центру; поле справа: 0; поле слева: 0; } #логотип { максимальная ширина: 600 пикселей; ширина: 100%; маржа: авто; поле слева: авто; поле справа: авто; } #logo изображение { ширина: 100%; поле слева: авто; поле справа: авто; отступ-верх: 50 пикселей; } /* Нижний колонтитул НАЧАЛО */ нижний колонтитул { цвет фона: #1d1b1b; выравнивание текста: по ширине; внизу: 50 пикселей; верх: 50 пикселей; отступ-верх: 5 пикселей; положение: нижнее; } /* @media (макс. ширина: 1000 пикселей) { .footer-меню ul{ маржа сверху: 10 пикселей; поле внизу: 20 пикселей; } } */ /*********************************/ /********** О CSS **********/ /*********************************/ #about {background-color: #000000; отступ-верх: 0 пикселей; отступ-дно: 0 пикселей; маржа сверху: 10 пикселей; поле внизу: 0 пикселей; цвет: #ffffff; } .about-img { дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; } .о { положение: относительное; ширина: 100%; поле: -45 пикселей 0 45 пикселей 0; } */ .about .col-lg-6 { заполнение: 0 0 0; высота: 50 пикселей; } .about .section-header { поле внизу: 20 пикселей; } .about .about-img { положение: относительное; } /* кнопка контакта*/ .btn{ граница: нет; радиус границы: 0 пикселей; цвет: #fff; преобразование текста: верхний регистр; отступ снизу: 15 пикселей; положение: относительное; фоновое изображение: линейный градиент (вверх, #262626 0 пикселей, #404040 10 пикселей, #262626 10 пикселей, #333 100%); } .btn:наведите{ цвет: #fff; } .btn:после{ содержание: ""; ширина: 0; высота: 10 пикселей; позиция: абсолютная; внизу: 0; слева: 0; граница-радиус: 0 0 5 пикселей 5 пикселей; переход: все 0,35 с облегчают 0 с; } .btn:hover:после{ ширина: 100% } .btn.red:после{ фон: #DAD3C5; } /* Страница контактов */ * { размер коробки: граница-коробка; } ч2 { выравнивание текста: по центру; поле внизу: 50 пикселей; поле сверху: 25 пикселей; цвет: #fff; } /* начальные стили формы ------------------------------- */ .группа { положение: относительное; поле внизу: 35 пикселей; } вход { размер шрифта: 18 пикселей; отступы: 5 пикселей 10 пикселей 10 пикселей 5 пикселей; дисплей: блок; ширина: 100%; граница: нет; нижняя граница: 1 пиксель сплошной #fff; фон: прозрачный; } ввод: фокус { контур: нет; } /* LABEL ====================================== */ этикетка { цвет: RGB(255, 255, 255); размер шрифта: 18 пикселей; шрифт-вес: нормальный; позиция: абсолютная; события указателя: нет; слева: 5 пикселей; верх: 10 пикселей; переход: 0,2 секунды облегчают все; -moz-transition: 0,2 секунды облегчают все; -webkit-transition: 0,2 секунды облегчают все; } /* активное состояние */ ввод: фокус ~ метка, ввод: действительный ~ метка { верх: -20 пикселей; размер шрифта: 14 пикселей; цвет: #fff; } /* НИЖНИЕ ПОЛОСКИ ================================= */ .бар { положение: относительное; дисплей: блок; ширина: 100%; } .bar:до, .bar:после { содержание: ''; высота: 2 пикселя; ширина: 0; внизу: 1 пиксель; позиция: абсолютная; фон: #fff; переход: 0,2 секунды облегчают все; -moz-transition: 0,2 секунды облегчают все; -webkit-transition: 0,2 секунды облегчают все; } .бар:до { осталось: 50%; } .бар:после { правильно: 50%; } /* активное состояние */ input:focus ~ .bar:before, input:focus ~ .bar:after { ширина: 50%; } /* ВЫДЕЛИТЕЛЬ ================================== */ .выделять { позиция: абсолютная; высота: 60%; ширина: 100 пикселей; верх: 25%; слева: 0; события указателя: нет; непрозрачность: 0,5; } ввод, выбор, текстовая область { цвет: #ffffff; } textarea: фокус, ввод: фокус { цвет: #ffffff; } /* активное состояние */ ввод: фокус ~ .highlight { -webkit-animation: удобство inputHighlighter 0,3 с; -moz-animation: удобство inputHighlighter 0,3 с; анимация: inputHighlighter 0,3 с, легкость; } /* АНИМАЦИИ ================ */ @-webkit-keyframes inputHighlighter { от { фон: #fff; } к { ширина: 0; фон: прозрачный; } } @-moz-keyframes inputHighlighter { от { фон: #fff; } к { цвет: #ffffff; ширина: 0; фон: прозрачный; } } @keyframes inputHighlighter { от { фон: RGB(255, 255, 255); } к { ширина: 0; фон: прозрачный; } } #панель { поле слева: авто; поле справа: авто; граница: 1 пиксель, сплошной RGB (200, 200, 200); box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px; фон: #000000; радиус границы: 0 пикселей; верх: 50 пикселей; внизу: 20 пикселей; поле внизу: 100 пикселей; отступ снизу: 10 пикселей; } /* СТРАНИЦА ДИЗАЙНА */ #Дизайн { маржа сверху: 500 пикселей; поле внизу: 200 пикселей; отступ-верх: 50 пикселей; маржа: авто; } #designtext { выравнивание текста: по центру; маржа: авто; } #designimages { дисплей: гибкий; максимальная ширина: 650 пикселей; ширина: 100%; маржа: авто; }