Как я могу выбрать первый IFRAME во втором теге FB в div? - PullRequest
0 голосов
/ 25 июня 2011

Это должно быть кросс-браузерной совместимостью, по крайней мере, с IE 7/8 и другими основными текущими браузерами.

У меня есть следующий (упрощенный) HTML:

<div id="facebook">
    <fb:like ...... />
    <fb:comments>
        <iframe .... />
    </fb:comments>
</div>

IFRAME добавлен Facebook, но мне нужно изменить его отображение.Как я могу использовать селекторы CSS, чтобы выбрать «первый IFRAME во втором теге FB под div с идентификатором facebook»?Мне нужно добавить CSS-атрибуты высоты и переполнения в IFRAME.

Если это невозможно с CSS в кросс-браузерно-совместимом режиме, каким будет подходящий селектор jQuery?В любом случае может помочь иметь оба, если кто-то хочет ответить на оба сценария, но я предпочитаю CSS.

Спасибо.

Ответы [ 2 ]

1 голос
/ 25 июня 2011

Это не fb элементы, они like и comment элементы в fb пространстве имен XML.

Способ W3C сделать все это - объявить пространство имен в вашей таблице стилей и использовать специальный синтаксис селектора с ним, как показано в этом ответе . Но, как и следовало ожидать, IE понятия не имеет, о чем я говорю, поэтому в качестве альтернативы вы можете рассматривать пространство имен как часть имени элемента, что приводит к fb:like и fb:comment. Поскольку : является специальным символом в селекторах CSS (псевдоклассах и псевдоэлементах), вы просто экранируете его обратной косой чертой, чтобы его можно было увидеть буквально.

Этот селектор CSS должен работать в IE7 + и других браузерах:

#facebook fb\:comments iframe:first-child {
    /* Styles */
}

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

0 голосов
/ 25 июня 2011

Я не уверен, возможно ли это сделать с помощью CSS, и даже если это так, он не будет совместим с IE7.

с использованием jquery:

var iframe = $("#facebook").children().eq(2).find("iframe").first();
iframe.css({overflow: [...], height: [...]});
...