Facebook .. "allowTransparency" дает недействительный XHTML в валидаторе W3C

Question

Что я сделал: Я встроил Facebook Like Box в свою обычную веб-страницу "XHTML 1.0 Transitional". Исходный код Facebook Like Box предоставлен Facebook:

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=true&amp;height=62"
  scrolling="no"
  frameborder="0"
  style="border:none; overflow:hidden; width:292px; height:62px;"
  allowTransparency="true">
</iframe>

Что говорит валидатор W3C: Когда я проверяю веб-страницу в валидаторе W3C, выдается следующая ошибка:

Строка 600, столбец 421: отсутствует атрибут "allowTransparency"

Но для работы IE нужно allowTransparency="true">.

Ожидаемое решение: Что мне нужно сделать, чтобы сделать его валидным как XHTML 1.0 Transitional, при этом на моей веб-странице оставалось поле «Мне нравится в Facebook».

Answer 1

Вы можете написать два кода для него. Один с allowTransparency с оператором if для IE, а другой без него. Таким образом, это может быть сделано. Итак, используйте этот код для вставки с условными комментариями HTML:

<!--[if IE]>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=true&amp;height=62"
  scrolling="no"
  frameborder="0"
  style="border:none; overflow:hidden; width:292px; height:62px;"
  allowTransparency="true">
</iframe>

<![endif]-->
<!--[if !IE]>-->
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=true&amp;height=62"
  scrolling="no"
  frameborder="0"
  style="border:none; overflow:hidden; width:292px; height:62px;">
</iframe>

<!--<![endif]-->

Это подтвердит XHTML, поскольку код iframe закомментирован, и вы также можете использовать allowTransparency.

РЕДАКТИРОВАТЬ : Закрытие iframe, как указано staticbeast в комментарии.

Answer 2

Если IE действительно нуждается в allowTransparency="true" для работы, то вы не сможете создать 100% действительную разметку XHTML 1.0 Transitional.

... но зачем IE нужен этот атрибут? Что происходит, когда оно опущено?

---

Если вы действительно обеспокоены проверкой W3C (я не думаю, что это того стоит, но это только я), тогда вы можете применить тот же атрибут iframe, используя JavaScript. Я не рекомендую это, *, но вы могли бы сделать это:

document.getElementById('theIFrameID').allowTransparency = true;

---

* потому что я не думаю, что цель создания 100% проверенной разметки оправдывает использование JavaScript для достижения чего-то, что в остальном идентично статической разметке.

Answer 3

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;colorscheme=light&amp;show_es=true&amp;stream=false&amp;header=true&amp;height=62"
  scrolling="no"
  frameborder="0"
  style="border:none; overflow:hidden; width:292px; height:62px; allowTransparency:true;">
</iframe>

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

Answer 4

Для меня это лучший способ использовать jQuery, как это:

Для кнопки «Мне нравится» на Facebook. Я устанавливаю class = "likebtn", а затем в файл .js:

$(document).ready(function () {
  $(".likebtn").attr('allowTransparency', 'true');
});

Вот и все; -)

Answer 5

Я не проверял это недавно, но я думаю, что вы можете иметь комментарии в тегах HTML, поэтому просто оберните allowTransparency в условный комментарий IE:

<!--[if ie]> allowTransparency="true" <![end if]-->

Чтобы иметь IEвидеть это, а все остальное игнорировать.Это также должен быть действительный XHTML, поскольку комментарии игнорируются браузерами, а условные комментарии - только IE.

Answer 6

Оставь как есть. «allowTransparency» только означает что-то для IE, и в противном случае оно будет игнорироваться. Валидация - это инструмент для проверки вашего документа на соответствие стандарту, а не самоцель. Вы сознательно пишете что-то за пределами стандарта HTML для конкретного случая; признать это, а не пытаться скрыть это.