Блог

Главная - Вопросы по программированию - закругленные углы с помощью плагина для изображения в IE 7?

закругленные углы с помощью плагина для изображения в IE 7?

#javascript #jquery #jquery-plugins #internet-explorer-7 #rounded-corners

#javascript #jquery #jquery-плагины #internet-explorer-7 #закругленные углы

Вопрос:

Наконец, я убедил своего босса больше не использовать закругленные изображения,

Итак, я хочу преобразовать их все в html с помощью css border-radius. Проблема в том, что нам все еще нужна поддержка Internet Explorer 7, и решение, похоже, находится в этом плагине jquery.

дело в том, что на официальном веб-сайте отлично работает с IE даже 6. но я могу заставить его работать только в Firefox или Chrome (что бесполезно, потому что они уже поддерживают border-radius)

вот как я пытаюсь, 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('.rounded5').corner();
});

</script>
</head>

<body>

<img src="http://images.wikia.com/logopedia/images/d/dc/TRYP_by_Wyndham_logo.png" style="width:50%;" alt="trip" class="rounded5" />

</body>

</html>

это доказательство http://jsfiddle.net/MKvHu/2 /

Есть идеи, чего мне не хватает?

Спасибо!!

Ответ №1:

почему бы вам не попробовать CSS3PIE?

Ответ №2:

Это явно не указано, но не похоже, что плагин может округлять края img элементов:

Важно понимать, что этот угловой плагин использует свою магию, добавляя больше элементов на страницу. В частности, он добавляет div «полосы» к элементу, который должен быть загнан в угол, и устанавливает сплошной цвет фона на этих полосах, чтобы скрыть фактические углы реального элемента.

Это означает, что вы можете иметь только закругленную рамку сплошного цвета вокруг изображения, используя этот плагин.

Причина, по которой он работает в Chrome и Firefox, заключается в том, что они border-radius поддерживают natively, что работает с img элементами. Однако, если вы измените тип угла на что-то другое bevel , вы увидите, что он не поддерживается ни в одном браузере: http://jsfiddle.net/namuol/MKvHu/4 /

Обратите внимание, как это работает для div приведенного ниже, но не img для . Итак, к сожалению, вы можете захотеть использовать статически закругленные изображения, если пользователям IE7 нужно, чтобы изображения были закруглены.

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

1. вау, ему не нужно придерживаться своего старого решения… он мог бы объединить этот плагин, например, с последующим вызовом $('img').wrap($('<div/>')); или чем-то подобным… таким образом, каждое изображение обернуто контейнером, который может использовать jquery.corner 🙂

2. … за исключением того, что это просто добавило бы закругленную рамку вокруг изображения. Это не то, что он ищет.

3. аргумент, вы правы… но это должно быть возможно, улучшив overflow css-вещь с помощью некоторой магии ширины и высоты 🙂

4. На самом деле это интересная идея.