закругленные углы с плагином к изображению в IE 7? - PullRequest
1 голос
/ 18 октября 2011

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

Так что я хочу преобразовать их все в 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/

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

спасибо !!

Ответы [ 2 ]

3 голосов
/ 18 октября 2011

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

2 голосов
/ 18 октября 2011

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

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

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

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

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

...