HTML5 и рамка фрейма

83

У меня есть iframe в документе HTML5. когда я проверяю, я получаю сообщение об ошибке, сообщающее мне, что атрибут на iframe frameBorderустаревшем и использовать вместо этого CSS.

У меня есть этот атрибут, frameBorder="0"потому что это был единственный способ выяснить, как избавиться от границы в IE, я безуспешно пробовал border:none;в CSS. Есть ли способ исправить это?

Благодарю.

Джей Ди Айзекс
источник

Ответы:

60

HTML 5 не поддерживает такие атрибуты, как рамка кадра, прокрутка, ширина полей и высота полей (которые поддерживались в HTML 4.01). Вместо этого в спецификации HTML 5 был введен атрибут seamless. Атрибут seamless позволяет встроенному фрейму выглядеть так, как если бы он отображался как часть содержащего документа. Например, не будут отображаться границы и полосы прокрутки.

По данным MDN

frameborder Устарело с HTML5

Значение 1(по умолчанию) рисует рамку вокруг этого кадра. Значение 0удаляет границу вокруг этого кадра, но вместо этого вы должны использовать границу свойства CSS для управления границами.

Как сказано в приведенной выше цитате, вы должны удалить границу с помощью CSS;
либо inline ( style="border: none;"), либо в вашей таблице стилей ( iframe { border: none; }).

При этом, похоже, не существует ни одного поставщика iframe, который бы не использовал frameborder="0". Даже YouTube по-прежнему использует этот атрибут и даже не предоставляет атрибут стиля, чтобы сделать фреймы обратно совместимыми, когда рамка фреймов больше не поддерживается. Можно с уверенностью сказать, что атрибут в ближайшее время никуда не денется. Это оставляет вам 3 варианта:

  1. Продолжайте использовать frameborder, просто чтобы убедиться, что он работает (пока)
  2. Используйте CSS, чтобы делать "правильные" вещи
  3. Используйте оба. Хотя это не решает проблему несовместимости (как и вариант 1), оно работает и будет работать в каждом браузере, который был и будет

Что касается предыдущего состояния этого ответа десятилетней давности:

seamlessАтрибут был поддержан за такой короткий промежуток времени (или вообще некоторыми браузерами), что MDN даже не перечислить его как устаревшие функции. Не используйте его и не запутайтесь в комментариях ниже.

Сотирис
источник
31
Так есть ли способ создать frameBorder = 0 в CSS?
Джей Ди Айзекс,
1
Это действительно раздражает, я использую последнюю версию Chrome, и она просто не работает. Хотя frameborder = "0" делает.
РГБК
1
Возвращаясь к этому, бесшовные работает на chrome ff и safari. Поместите его в iframe так: <iframe seamless
RGBK
9
Вы должны использовать border-width: 0px;, но я боюсь, что это несовместимо с кроссбраузерностью для использования с iframes. seamlessпо-прежнему поддерживается не всеми браузерами! Это одна из тех немногих проблем HTML5, с которыми вам просто нужно принять. Пользуюсь frameborder="0"и хрен с валидацией!
Соломон Клоссон
2
seamlessбыл удален из спецификации HTML5, поэтому он никогда не будет поддерживаться. Ответ @ ForTheWatch теперь лучший.
rvighne
48

Согласно другой публикации здесь , лучшим решением является использование CSS-записи

style="border:0;"
csharpforevermore
источник
6
Думаю, рекомендуют: border-width: 0pxТБХ. border: none;не будет работать.
Соломон Клоссон
5
@ cnotethegr8 - не работает в IE и Opera (текущая версия), не тестировался в Chrome, Safari и / или Firefox. Я тестирую на дрянные браузеры, потому что если он работает в них, то почти наверняка будет работать в других.
Соломон Клоссон
2
@SolomonClosson I test for the crappy browsers, because if it works in them, than it is almost sure to work in the others.Боже, как наивно. Если вы хотите убедиться, что ваше приложение работает в браузере, вы должны протестировать его в этом браузере, просто и просто. Никаких гарантий, только причуды.
Джонатан Дюмен
1
Обратите внимание, что единица измерения в 0 пикселей избыточна. Я предпочитаю маржу: 0; или граница: 0; потому что 0px == 0em == 0% == 0, когда дело доходит до CSS.
csharpforevermore
1
Теперь, seamlessкогда это исключено из спецификации, это единственный правильный ответ
rvighne
17

Поскольку frameborderатрибут необходим только для IE, есть другой способ обойти валидатор. Это легкий способ, который не требует Javascript или каких-либо манипуляций с DOM.

<!--[if IE]>
   <iframe src="source" frameborder="0">?</iframe>
<![endif]-->
<!--[if !IE]>-->
   <iframe src="source" style="border:none">?</iframe>
<!-- <![endif]-->
Г-н Листер
источник
3
Это лучший ответ на заданный вопрос. Однако цель соответствия HTML5 (которая находится в стадии разработки и может и будет изменена без уведомления) бесполезна, особенно когда она заставляет вас использовать уловки, которые не служат никакой другой цели, кроме такого соответствия, и которые делают код более сложным. . Лучше продолжать использовать, frameBorder="0"если вам не нужна рамка вокруг встроенного фрейма.
Юкка К. Корпела
Абсолютная правда. Просто хочу отметить, что, поскольку атрибут frameborder является чисто презентационным, маловероятно, что он когда-либо вернется к стандарту HTML, независимо от того, насколько сильно стандарт меняется.
Мистер Листер
Атрибут находится в «стандарте» HTML5: w3.org/TR/html5/rendering.html#frames-and-framesets
Юкка К. Корпела
@ JukkaK.Korpela Подожди, что? Тогда почему OP должен получить ошибку проверки? Ой, извините, страница, на которую вы ссылаетесь, посвящена, frameа framesetне iframe. Атрибут является устаревшим на iframeэлементе; см. w3.org/TR/html5/obsolete.html#attr-iframe-frameborder
мистер Листер,
Ошибка проверки возникает из-за того, что функция объявлена ​​устаревшей, что на самом деле не означает ничего, кроме выдачи сообщения. Атрибут все еще определен в HTML5, и ожидается, что браузеры, согласно HTML5 CR, будут продолжать его поддерживать.
Юкка К. Корпела
6

Это работает

iframe{
    border-width: 0px;
}
Гарри Бош
источник
2

Как насчет того же метода для «обмана» валидатора с помощью Javascript, вставив целевой атрибут в XHTML <a onclick="this.target='_blank'">?

  • onsomething = "this.frameborder = '0'"

<iframe onload = " this.frameborder='0' " src="menu.html" id="menu"> </iframe>

Или getElementsByTagName]("iframe")1 добавить этот атрибут для всех фреймов на странице?

Не тестировал это, потому что я сделал кое-что, что означает, что в IE меньше 9 ничего не работает! :) Так что пока разбираюсь ... :)

Гарри Альффа
источник
0

Я нашел хорошую работа вокруг , что позволит его работать в IE7 здесь . Он обходит валидатор для атрибута frameBorder, но сохраняет css для будущих браузеров, как описано в сообщении.

сарид
источник
использовать JavaScript для создания iframe? он дополнительно отсрочит время загрузки содержимого iframe просто для устранения предупреждающего сообщения CSS. Как говорится в принятом ответе, рекомендуется seamlessвместо этого использовать атрибут.
Raptor
Да, однако бесшовные у меня не работали в IE7, отсюда и мой пост.
sareed 09
-5
style="border:none; scrolling:no; frameborder:0;  marginheight:0; marginwidth:0; "
Антон Essential
источник
11
Чего стоит: это недействительный код. scrolling, frameborder, marginheight / width не являются свойствами css.
Патрик Аффентранджер,