правильное вычисление $(this).css(”width”) в Safari

Сегодня задал этот вопрос, но я думаю, что получил правильный ответ слишком рано. Я пытаюсь понять, как получить длину и ширину css элемента привязки с помощью jquery в Safari. Но я продолжаю возвращать «0», и мне сказали, что это произошло потому, что javascript срабатывает до того, как отрисовывается css - причуда браузеров Webkit.

Вот исходная страница: http://f1shw1ck.com/jquery_sandbox/csspops-orig.html< /а>

Тем не менее, я написал небольшой тест, сказав jquery подождать, пока все не будет полностью отрисовано, прежде чем захватить css. http://f1shw1ck.com/jquery_sandbox/csspops.html

Для селектора

a.popup {
                width: 800px;
                height: 560px;
            }

и HTML

<a href="http://www.metmuseum.org/toah/hd/apol/hd_apol.htm" class="popup">African Rock Art: Apollo 11 Cave Stone (c. 25,500 - 23,500 BCE); Wonderwerk Cave Stones (c. 8000 BCE)</a>

подождите, пока страница не будет полностью, затем получите эти размеры:

$(document).ready(function () {
                if (jQuery.browser.safari && document.readyState != "complete"){
                    //console.info('ready...');
                    setTimeout( arguments.callee, 5000 );
                    return;
                  }
          alert($("a.popup").css("width"));
        });

За исключением того, что «0» все еще возвращается в Safari. Я делаю это неправильно, или есть какая-то другая причина в игре?

Спасибо!


jquery css safari cross-browser width
person two7s_clash    schedule 04.09.2009    source источник
comment
Это все еще сводит меня с ума - единственное, что я могу придумать, это как-то пройтись по каждому элементу и использовать ('selector').css('width', 800) или что-то еще, чтобы вручную установить атрибуты... но это был бы ужасный, ужасный, бесполезный хак.   -  person Andy Mikula    schedule 04.09.2009
comment
Я теряю сон из-за этого ... даже не уверен, что хочу определять всплывающие окна таким образом, но я умираю от желания найти способ разрешить пользователям устанавливать метаданные всплывающих окон в CSS ...   -  person two7s_clash    schedule 06.09.2009

Ответы (2)


arrow_upward
2
arrow_downward

Колин прав. Причина, по которой он возвращает 0, заключается в том, что привязки не имеют эффективной ширины CSS в соответствии с Safari, поскольку они являются встроенными элементами. Вероятно, это ошибка в jQuery для Safari.

Независимо от ошибки, установка ширины якоря для определения ширины всплывающего окна, которое он вызывает, не кажется мне хорошей практикой. почему ты хочешь сделать это? Настройка CSS якоря, который не имеет ничего общего с представлением якоря, кажется обратным, просто установите его в javascript для поиска a.popup.large и установите определенную ширину/высоту для всплывающего окна. В противном случае найдите a.popup и установите другую высоту и ширину.

person kmiyashiro    schedule 05.09.2009
comment
Ну, это не совсем моя идея, но в этом проекте есть люди, использующие этот шаблон для создания сайтов, которые не знают javascript, только базовый css. В настоящее время мы указываем элементы браузера с именами стилей, такими как console и show-nav: ‹a class=popup console show-nav.... Это задается в JS, как вы говорите. Но мы хотим, чтобы пользователи могли легко создавать свои собственные стили, определяющие размеры окон по имени. Очевидно, по чисто лингвистическим причинам использование свойств ширины и высоты имеет наибольший смысл, но, я не знаю, клип или что-то в этом роде может сработать. Просто хотел посмотреть, возможно ли это. - person two7s_clash; 06.09.2009

arrow_upward
1
arrow_downward

Пробовали добавить display: block в a.popup?

Это заставит ссылку иметь ширину 800 пикселей, если вы хотите получить ее автоматическую ширину, попробуйте

alert($("a.popup").width());
person Colin    schedule 04.09.2009
comment
Я думаю, вы неправильно поняли... селектор css на самом деле будет использоваться не для отображения, а для определения высоты и ширины всплывающего окна. Вопрос в том, как я могу заставить Safari и jquery возвращать значения, определенные css, для ширины и высоты моих якорей? другие браузеры работают нормально. - person two7s_clash; 04.09.2009
comment
Возможно, display: inline-block было бы лучше; поскольку он позволяет определить width, но сохраняет тип отображения inline. (Хотя это работает ненадежно в IE6, хотя обычно это нормально для обычно встроенных элементов.) - person David says reinstate Monica; 05.09.2009