JQuery Rounded Corners в Internet Explorer (IE) испортил - PullRequest
Новая
       12

JQuery Rounded Corners в Internet Explorer (IE) испортил

7 голосов
/ 20 октября 2008

Я использую jQery.corner.js из JQuery для создания закругленных углов на некоторых тегах td, и они отлично выглядят в IE, КРОМЕ

  1. если вы откроете новую вкладку и вернетесь на страницу
  2. если вы перейдете на другую вкладку, нажмите на ссылку, затем вернитесь на страницу
  3. если вы наводите курсор мыши на div / menu, выполняющий javascript (я думаю).

Закругленные углы заменяются горизонтальными линиями, а текст внутри тега td сдвигается вниз. Как только страница обновляется, рендеринг возвращается к нормальному состоянию. Во всех случаях он отлично работает в Firefox.

Есть идеи?

Для справки, код Javascript, который я использую, выглядит следующим образом (это страница MOSS 2007): 

$(document).ready(function(){
   $("table.ms-navheader td").corner("top"); 
});

Вот пример HTML-страницы, которая отлично отображает проблему: 

<html>
    <head>
        <script type="text/javascript" src="jquery-1.2.6.js"></script>
        <script type="text/javascript" src="jquery.corner.js"></script>
        <script type="text/javascript">
          <!--

            $(document).ready(function()
            {
                $("div").corner("top");
                $("td").corner(); 
            });

          //-->
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td style="background-color: blue">
                    TD that will be messed up.
                </td>
            </tr>
        </table>
        <div style="background-color: green">
            divs don't get messed up.
        </div>
    </body>
</html>

В приведенном выше коде TD будет испорчен, как только вы откроете новую вкладку, но не div. У меня нет большого контроля над HTML-кодом, создаваемым MOSS, иначе я мог бы укусить пулю и использовать здесь DIV вместо таблицы.

Ответы [ 9 ]

5 голосов
/ 18 сентября 2009

В IE у меня были лучшие результаты с библиотекой DD_Roundies . Работает только в IE, хотя. Для Firefox вам нужно добавить стили -moz-border-radius.

4 голосов
/ 20 октября 2008

Я согласен с RichH, я думаю, что все популярные библиотеки JavaScript оставляют желать лучшего при попытке создать закругленные углы.

Я всегда использую Cornershop: http://wigflip.com/cornershop/, Это генератор изображений / CSS, который избавляет от необходимости делать закругленные края вручную.

3 голосов
/ 21 октября 2008

Возможно, вы захотите попробовать этот плагин вместо jquery.curvycorners.js.

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

Лучшая вещь -> сглаживание по умолчанию.

http://blue -anvil.com / jquerycurvycorners / test.html

2 голосов
/ 24 мая 2010

curvycorners.js и jquery.curvycorners.js работают, только если вы не хотите использовать какие-либо переходы.

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

2 голосов
/ 20 октября 2008

У меня не было ничего, кроме проблем с закругленными углами библиотек Javascript (особенно с IE6 и 7)

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

1 голос
/ 16 мая 2011

, чтобы заставить работать кривые углы jquery в IE, просто придать элементу цвет фона. Не уверен, почему это так ... просто работает как волшебство!

0 голосов
/ 04 июня 2009

У меня были похожие проблемы, даже в Firefox, я обнаружил, что если вы примените «углы» к элементу, который имеет класс, который устанавливает цвет фона, углы никогда не будут применены. В моем случае я добавляю класс с именем «selected», который дает другой цвет фона выбранной «вкладке» в UL. Чтобы предотвратить это, я применяю цвет фона, используя js вместо css после добавления углов: 

$('.selected').css('background-color', '#3296C0');

Кроме того, вы добавляете: hover, который меняет цвет фона, углы возвращаются в квадрат при наведении. Решение, которое я имею до сих пор, состоит в том, чтобы использовать событие onhover, которое повторно применяет углы (вы также можете установить цвет здесь). 

 $('#top-nav li a').hover(function(){
        $(this).corners('top');
    });

Что касается IE6 - кошмара - было бы не так плохо, если бы я мог обнаружить IE6 и просто не добавлять углы, оставляя их в квадрате. Еще даже не пробовал IE 7 ...

0 голосов
/ 13 февраля 2009

Я искал и не нашел решения для закругленных углов на вкладках пользовательского интерфейса jquery. Jquery themeroller поддерживает закругленные углы, но в документации говорится, что они не работают в IE.

Вот хорошая страница с 25 различными методами закругленных углов http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

0 голосов
/ 20 октября 2008

Трудно представить проблему, которая вам нужна, ссылка была бы очень полезна. Убедитесь, что ваши свойства высоты и ширины определены для каждой ячейки таблицы. Это может быть проблема hasLayout.

...