Блог

Главная - Вопросы по программированию - CSS закругленный угол для на iPhone первого поколения

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

#javascript #iphone #css #image #rounded-corners

#javascript #iPhone #css #изображение #закругленные углы

Вопрос:

Следующий код работает в все настольные браузеры 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 версии 4.3.2, но не в iOS версии 3.

Комментарии:

1. «Следующий код работает во всех настольных браузерах, в которых я его тестировал» ?? Во всех браузерах WebKit, вы имеете в виду?

2. Да! Код, который у меня есть в моем реальном приложении, также работает для Firefox, но код, который я сократил здесь, работает только в браузерах WebKit. Я обновлю вопрос. Хороший улов.

Ответ №1:

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

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

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

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

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

Есть три приемлемых решения:

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

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

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

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