CSS закругленный угол для <img>на iPhone первого поколения - PullRequest
Новая
       7

CSS закругленный угол для <img>на iPhone первого поколения

4 голосов
/ 01 октября 2011

Следующий код работает в во всех браузерах для настольных ПК Chrome и Safari на рабочем столе, а также в последних iPhone и на всех устройствах Android, которые я тестировал.Однако в iPhone первого поколения и iPhone 3G верхний левый угол <img> не закруглен.

Другой CSS, который у меня есть для закругления углов (на элементах <h1>) на iPhone, кажется, отлично работает на этих старых устройствах.Это просто округление для элемента <img>, которое не работает.

Соответствующий Javascript: 

var profilePhoto = document.createElement("img");
profilePhoto.setAttribute("src","http://example.com/photo.jpg");
profilePhoto.setAttribute("alt","");
profilePhoto.setAttribute("class","menu-first");
profilePhoto.setAttribute("style","float:left; border:0; padding:0!important; margin-top:0!important; -webkit-border-top-right-radius:0; -webkit-border-top-left-radius:.5em;");
document.getElementById('menu-container').appendChild(profilePhoto);

Соответствующий HTML: 

<div id="menu-container"></div>

Мне известно о«Закругленные углы не отображаются, если радиус больше половины высоты или ширины изображения», и здесь дело не в этом.Радиус - это небольшая часть размера изображения.

JSFiddle: http://jsfiddle.net/RaK3T/

(Ух, JSFiddle действительно работает на iPhone 3G, это потрясающе!)

ОБНОВЛЕНИЕ : Полагаю, это может быть версия для iOS, которая важнее, чем модель телефона.Похоже, что работает нормально в iOS v4.3.2, но не в iOS v3.

1 Ответ

1 голос
/ 02 октября 2011

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

В результате округленные границы действительно отображаются, ноизображение переднего плана затем помещается поверх них и не обрезается.Это, очевидно, влияет только на тег <img>, так как это единственный тег с изображениями переднего плана.

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

Эта проблема была быстро обнаружена и исправлена ​​(несколько быстрее с помощью Webkit, чем Firefox, если память служит), и мы все пошли дальше.

Но для веб-разработчиков все еще остается проблема поддержки более старых версий этих браузеров.

Существует три работоспособных решения:

  1. Используйте стиль background-image вместо переднего плана <img>.
  2. Игнорируйте проблему и позвольте старым браузерам жить с квадратными углами (о ужас!).
  3. Используйте любойиз старых хаков с закругленными углами, которые рисуют углы вручную.

Лично я предпочитаю вариант 2, я ценю, что он на самом деле не отвечает на вопрос, но у меня нетпроблема с этим: это косметическая деталь в старых браузерах;Вы бы не попытались заставить это работать на IE6, не так ли?(не так ли?).

Если этого недостаточно для вас, тогда вариант 1 является типичным решением, с которым большинство людей согласились в то время.Но семантически не очень хорош и имеет проблемы, если вам нужно масштабировать изображение и т. Д.

И чем меньше сказано о варианте 3, тем лучше.

...