JQuery пышные углы проблема не работает в IE8 - PullRequest
Новая
       20

JQuery пышные углы проблема не работает в IE8

3 голосов
/ 02 марта 2011

Вот моя страница: http://robynrowe.sanscode.com

Взгляните на IE8, а затем IE7 (режим Compat), и вы увидите проблему.Рамка справа просто исчезает в IE8, но отлично округляется в IE7.

Я использую плагин jQuery для извилистых углов JQuery Curvy Corners от Mike Jolley * * http://blue -anvil.com * * http://code.google.com/p/jquerycurvycorners/ *

Кто-нибудь знает, почему это происходит?

Спасибо

Джейсон

Ответы [ 2 ]

5 голосов
/ 02 марта 2011

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

http://jquery.malsup.com/corner/

Он поддерживается во всех браузерах, включая IE.Он рисует углы в IE, используя вложенные элементы div (без изображений).Он также имеет встроенное округление радиуса границы в браузерах, которые его поддерживают (Opera 10.5+, Firefox, Safari и Chrome).Поэтому в этих браузерах плагин просто устанавливает вместо этого свойство css.

Вот как его использовать

Вам необходимо включить jQuery и js-скрипт Corner перед </body>.Затем напишите свой jQuery как $ ('div, p'). Corner ('10px');и поставить перед ''.Таким образом, ваш HTML будет выглядеть как приведенный ниже код.Здесь я делаю круглые углы для всех тегов div и p.Если вы хотите сделать это для определенного идентификатора или класса, то вы можете сделать что-то вроде $('#myid').corner();

<body>
    <div class="x"></div>
    <p class="y"></p>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
    <script>$('div, p').corner();</script>
</body>

Проверить рабочий пример на http://jsfiddle.net/VLPpk/1

0 голосов
/ 02 марта 2011

Первая подсказка, которую я нахожу, заключается в том, что в IE8 больше нет содержимого этого div (после обработки jQuery).Div с классом "border-pink box drawn" содержит только другой div с двумя другими пустыми div внутри.Заглянув в DOM, вы больше не можете найти текст "Reward your tasbuds ...".

EDIT:

Заметил также ошибку js, вот связанная ветка http://groups.google.com/group/curvycorners/browse_thread/thread/d40ceb7c3bccec80

Вы должны проверить ваши фильтры, очевидно.

...