Border radius кроссбраузерность: Кроссбраузерный border-radius

Leave a Comment / Разное / By /

Содержание

css3 — Кроссбраузерность блока — Stack Overflow на русском

Вопрос задан

Изменён 3 года 1 месяц назад

Просмотрен 42 раза

Сверстал сайт по макету. Нужным элементам добавил вендорные префиксы. Однако есть участки на сайте, которые работают во всех браузерах прекрасно, но именно в IE, вёрстка по ним «плывёт». Не могу разобраться, что делаю не так. В примере ниже две фотографии сильно искажены, при отображении в IE, в остальных браузерах отображаются нормально, в круглом блоке с border-radius: 50%;

Привожу пример:

.offer_info {
  margin-top: 50px;
}

.offer_info,
.info_1,
.info_2 {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.
 
 info_1 {
  margin-right: 15px;
}

.info_2 {
  margin-left: 15px;
}

.img_1,
.img_2 {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.style_img {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #1db05e;
  border-radius: 50%;
  width: 60px;
  height: 60px;
}

.offer .text_info {
  padding-left: 30px;
  color: #566375;
  font-size: 16px;
  margin-top: 0;
  line-height: 25px;
}
<div>

  <div>

    <div>
      <div>
        <img src="img/fon_info1. png" alt="img">
      </div>
    </div>

    <p>
      Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi gravida tellus in purus pharetra, vel dignissim mauris viverra. Maecenas vitae risus est. In hendrerit, massa at.
    </p>

  </div>

  <div>

    <div>
      <div>
        <img src="img/fon_info2.png" alt="img">
      </div>
    </div>

    <p>
      Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi gravida tellus in purus pharetra, vel dignissim mauris viverra. Maecenas vitae risus est. In hendrerit, massa at.
    </p>
  </div>

</div>
  • css3
  • html5
  • internet-explorer
  • кроссбраузерность
7

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

что это такое, как проверить, как обеспечить

Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

Кроссбраузерность — способность веб-ресурса подстраиваться под несколько браузеров и корректно отображаться в них.


Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

Например, вы сделали сайт для вашего интернет-магазина. Вы разработали красивый дизайн, который приятен для глаз. Но на ваш сайт пользователи заходят через разные браузеры. Кто-то вообще использует смартфон. И если вы не проверили кроссбраузерность ресурса, может случиться, что в некоторых браузерах сайт будет отображаться плохо.

Могут съезжать элементы, могут не отображаться картинки, станут некрасивыми шрифты. Человек не будет пользоваться таким сервисом. Он пойдет искать дальше.

Задача разработчика сайта — сделать его так, чтобы вне зависимости от браузера и устройства ресурс отображался правильно.

Кроссбраузерность верстки

Между браузерами идет конкуренция. Раньше каждый старался добавить исключительные фишки и опции. Это привело к тому, что стандарты HTML перестали соблюдаться, и каждый браузер по-своему отображал страницы.

Netscape Navigator выбыл из гонки, отдав монополию Internet Explorer. Спустя практически одновременно начали набирать обороты проекты Mozilla Firefox (Gecko), Google Chrome (Blink), Opera (WebKit) и Safari (WebKit), разделив рынок между собой и заставив сообщество задуматься о вопросе кроссбраузерности своих сайтов.

Правильная верстка сайта вызывает доверие у пользователей. Они с удобством смогут пользоваться ресурсом. Лояльность аудитории — важный показатель.

Разработать кроссбраузерную верстку — отдельный вопрос при работе над крупным проектом. При выполнении этого условия чаще всего задействуются CSS и HTML правила, иногда дополняемые небольшим JavaScript (jQuery) кодом.

Выполняется анализ целевых платформ, с которых наиболее вероятно и часто приходит клиент на сайт, внимание концентрируется на наиболее популярных браузерах и разрешениях экранов. Для этих целей можно использовать Яндекс Метрику, Google Analytics и другие сервисы сбора данных о посетителях.

На сегодняшний день производители браузеров начали активно заниматься своевременной поддержкой стандартов World Wibe Web, HTML 5 и CSS 3, что несомненно сказалось на качестве отображения страниц. Однако, в некоторых свойствах каскадных таблиц и трактовке кода, даже сейчас на разных движках встречаются существенные расхождения, которые необходимо исправлять вручную.

Как обеспечить кроссбраузерность сайта

Использование CSS hacks

“CSS хаки” — отрывки кода, понимаемые только одним определенным браузером. Если ваш сайт корректно отображается в двух браузерах, а в трёх других что-то идёт не так, чаще всего вопрос решается дописыванием хаков для каждого из трех неверно-интерпретирующих движков. Хаки — самый “грязный” способ исправления ошибок, делает код не эстетичным и не валидным, но рабочим.

Вендорные префиксы

Остались, как ещё один рудимент браузерных войн, в особенности браузеров WebKit. Более “чистый” и честный способ, чем использования хаков.

Каждый браузер имеет собственные свойства с вендорным префиксом, так, например элемент border-radius в Mozilla Firefox представлен свойством -moz-border-radius, а в Chrome и Safari -webkit-border-radius. Такие свойства меняют поведение элемента только в определенном браузере, и игнорируются другими платформами.

Универсальность элементов

Делайте упор на универсальные элементы — те, которые одинаково работают в большинстве браузеров. Работа только с ними сделает код коротким, чистым и понятным.

Проверить поддержку правил можно на бесплатном сервисе caniuse. com. В наглядном представлении в виде таблиц можно уточнить, начиная с какой версии тот или иной тег введён в поддержку каждым движком, и можно ли его применять

Как проверить кроссбраузерность сайта

Вы сверстали сайт. Учли советы. Настало время его проверить. Первый способ — установить на виртуальную машину всевозможные браузеры, открыть свой сайт в каждом и посмотреть.

Так же есть специальные сервисы проверки сайта на кроссбраузерность.

  • browsershots.org
    Преимущество:Позволяет получать скриншоты из большого количества разных версий движков.
    Недостаток: Долгое ожидание.

  • crossbrowsertesting.com
  • browserstack.com
    Преимущество: Мощные средства для глубокого анализа веб-ресурса в режиме онлайн.
    Недостаток: Платное использования большинства функций.

Как влияет на посещаемость сайта

Существует негласная статистика, говорящая о том, что Яндекс Браузер и Chrome пользуются популярностью молодёжи, а Opera и Mozilla отдают предпочтения уже работающие люди. Представьте, что вы создали сайт по скейтбордингу для молодежи, а его оформление с треском проваливается в Chrome. Шрифты не загружаются, отступы появляются совсем не там, где они должны быть — настоящая катастрофа маркетинга, потеря целевой аудитории.

Это был лишь наглядный пример того, как кроссбраузерность важна для любого проекта. Именно то, насколько хорошо ваш сайт поддерживает наибольшее количество браузеров, зависит его посещаемость и интерес пользователей к проекту.

Никто не будет читать блог с мобильного телефона, если буквы на сайте мелкие и неразборчивые, посетитель уйдет с сайта, если увидит, что в его браузере дизайн выглядит нечитабельно и ужасно.

К тому же, поисковые системы поднимают внутренний рейтинг сайтам, оформленным согласно стандартам современной верстки, что также положительно скажется на конверсии проекта.

Так же в блоге у нас есть статья про адаптивную верстку. 

Тестирование на совместимость с браузером CSS3 Border-radius

Тестирование в новейших настольных и мобильных браузерах Для
CSS3 Border-radius (закругленные углы)

Тестирование веб-приложения на LambdaTest Комбинации ОС для проблем совместимости между браузерами и убедитесь, что резервные копии вашей веб-страницы нормально работают в браузерах, которые не поддерживают CSS3 Border-radius (закругленные углы).

Все версии браузера

БРАУЗЕРНАЯ ПОДДЕРЖКА CSS3 Border-radius (закругленные углы)

Google Chrome

CSS3 Border-radius (закругленные углы) совместим с префиксом -webkit- для браузера Chrome 4. Это свойство браузера поддерживается для Chrome 5 до 67.

Mozilla Firefox

Это свойство браузера частично совместимо с префиксом -moz- для Firefox 2. Firefox 3–3.6 поддерживает этот веб-элемент с префиксом -moz-. Firefox 4–60 поддерживает это свойство браузера.

Internet Explorer

Браузер IE версии 6–8 не поддерживает этот элемент браузера. CSS3 Border-radius (закругленные углы) поддерживается для IE 9–11.

Safari

Safari 3.1–4 поддерживают этот веб-элемент с префиксом -webkit-. Это свойство поддерживается для Safari 5–11.1.

Microsoft Edge

Элемент CSS3 Border-radius (закругленные углы) поддерживается браузером Microsoft Edge.

Опера

Браузер Opera версии 10. 1 не поддерживает это свойство. CSS3 Радиус границ (закругленные углы) совместим с Opera 11.5–53.

я использую» предоставляет актуальные таблицы поддержки браузеров для поддержки интерфейсных веб-технологий в настольных и мобильных веб-браузерах.

Другие браузеры на выбор

Вы можете выбирать из более чем 3000 настольных и мобильных браузеров, включая Chrome, Safari, Internet Explorer, Edge, Yandex, Opera и Firefox, что позволяет вам гарантировать, что ваши клиенты получат безупречный опыт работы с пикселями на всех размерах экрана, устройствах, операционных системах. системы, браузеры и разрешения.

Оформить заказ во всех браузерах

Попробуйте LambdaTest сейчас !!

Получайте 60 минут живого интерактивного тестирования каждый месяц БЕСПЛАТНО!! Единственный бесплатный инструмент кросс-браузерного тестирования на всю жизнь.

  • Кредитная карта не требуется
  • Бесплатная регистрация
  • Поддержка 24/7

ПРЕИМУЩЕСТВА

Самый быстрый способ кросс-браузерного тестирования

Больше причин любить LambdaT est

Это не только инфраструктура, вы получаете целый ряд дополнительных функций, которые упростят тестирование вашего браузера и помогут вам быстрее выпускать продукты.

Интегрированная отладка

Интегрированные инструменты разработчика, помогающие отлаживать проблемы в живое тестирование.

Локальный хостинг


Веб-тестирование

Локальный хостинг веб-тестирования для сохранения вашего веб-сайта или сети приложение из-за ошибок развертывания.

Геолокация


Тестирование

Тестирование из разных мест, чтобы убедиться, что ваши пользователи идеальный опыт во всех местах.

Готовы начать?

Зарегистрируйтесь, чтобы использовать LambdaTest, это абсолютно бесплатно
начать работу с

  • Кредитная карта не требуется
  • Бесплатная регистрация
  • Круглосуточная поддержка

Домашняя страница CSS3 Border-radius (закругленные углы)

CSS3 Border-radius (закругленные углы) | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск ?

CSS3 Border-radius (закругленные углы)

— CR

  • global»>
    Глобальное использование
    97,44% + 0% «=» 97,44%

Способ закругления углов бордюра. Охватывает поддержку сокращенного border-radius , а также расширенных свойств (например, border-top-left-radius )

Chrome
  1. 4: Поддерживается
  2. 5 — 112: Поддерживается
  3. 113: Поддерживается
  4. 114–116: Поддерживается
Edge
  1. 12–112: Поддерживается
  2. 113: Поддерживается
Safari
901 56
  • 3.1 — 4: Поддерживается
  • 5: Поддерживается
  • 01% — Supported»> 5.1 — 6.1: Поддерживается
  • 7 — 16.4: Поддерживается
  • 16.5: Поддерживается
  • 16.6 — TP: Поддерживается
    • Firefox
    1. 2: Частичная поддержка
    2. 3–3.6: Поддерживается
    3. 4–49: Поддерживается
    4. 50–112: Поддерживается
    5. 113: Поддерживается
    6. 114–115: Поддерживается
    Opera
    1. 9–10.1: не поддерживается
    2. 10.5–98: Поддерживается
    3. 02% — Supported»> 99: Поддерживается
    IE
    1. 5,5–8: Не поддерживается
    2. 9–10: Поддерживается
    3. 11: Поддерживается
    Chrome для Android
    1. 113: поддерживается
    Safari на iOS
    1. 3.2: Поддерживается
    2. 4–16.4: Поддерживается
    3. 16.5: Поддерживается
    Samsung Internet
    1. 4–20: Поддерживается
    2. 21: Поддерживается
    Opera Mini
    1. все: не поддерживается
    Opera Mobile

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *