HTML5 및 프레임 테두리


82

HTML5 문서에 iframe이 있습니다. 유효성을 검사 할 때의 속성 iframe frameBorder이 더 이상 사용되지 않고 대신 CSS를 사용 하라는 오류가 표시 됩니다.

frameBorder="0"IE에서 테두리를 제거하는 방법을 알아낼 수있는 유일한 방법 이었기 때문에 여기 에이 속성이 있습니다. 저는 border:none;운없이 CSS를 사용해 보았습니다 . 이 문제를 해결할 수있는 방법이 있습니까?

감사.

답변:


58

HTML 5는 frameborder, scrolling, marginwidth 및 marginheight (HTML 4.01에서 지원됨)와 같은 속성을 지원하지 않습니다. 대신 HTML 5 사양은 seamless 속성을 도입했습니다. seamless 속성을 사용하면 포함 문서의 일부로 렌더링되는 것처럼 인라인 프레임이 표시 될 수 있습니다. 예를 들어, 테두리와 스크롤바는 나타나지 않습니다.

MDN에 따르면

frameborder HTML5부터 사용되지 않음

1(기본값)은이 프레임 주위에 테두리를 그립니다. 이 값 0은이 프레임 주위의 테두리를 제거하지만 대신 CSS 속성 테두리를 사용하여 테두리를 제어해야합니다.

위의 인용문처럼 CSS로 테두리를 제거 해야 합니다.
인라인 ( style="border: none;") 또는 스타일 시트 ( iframe { border: none; }).

즉, .NET을 사용하지 않는 단일 iframe 제공 업체는없는 것 같습니다 frameborder="0". YouTube조차도 여전히이 속성을 사용하며 frameborder가 더 이상 지원되지 않을 때 iframe을 이전 버전과 호환되도록하는 스타일 속성도 제공하지 않습니다. 속성이 곧 아무데도 가지 않을 것이라고 말하는 것이 안전합니다. 이렇게하면 3 가지 옵션이 있습니다.

  1. 계속 사용하여 frameborder작동하는지 확인하십시오 (당분간).
  2. CSS를 사용하여 "올바른"작업 수행
  3. 둘 다 사용하십시오. 이것이 비 호환성 문제를 해결하지는 못하지만 (옵션 1과 마찬가지로), 기존의 모든 브라우저에서 작동합니다.

이 10 년 된 답변의 이전 상태에 관해서는 :

seamless속성은 짧은 시간 동안 (또는 일부 브라우저에서는 전혀 지원되지 않음) MDN이 더 이상 사용되지 않는 기능으로 나열하지도 않았습니다. 그것을 사용하지 말고 아래 설명에 혼동하지 마십시오.


31
그렇다면 CSS에서 frameBorder = 0을 생성하는 방법이 있습니까?
JD Isaacks 2010 년

1
정말 짜증나 네요. 최신 Chrome을 사용하고 있는데 작동하지 않습니다. frameborder = "0"은 그렇습니다.
RGBK 2010

1
이것을 다시 방문하면 seamless는 chrome ff와 safari에서 작동합니다. iframe에 다음과 같이 넣으십시오. <iframe seamless
RGBK 2011 년

8
를 사용해야 border-width: 0px;하지만 .NET과 함께 사용하기 위해 브라우저 간 호환이되지 않는 것이 두렵습니다 iframes. seamless아직 모든 브라우저에서 지원되는 것은 아닙니다! 이것은 여러분이 받아 들여야 할 몇 가지 HTML5 문제 중 하나입니다. frameborder="0"유효성 검사와 함께 사용 하고 지옥!
Solomon Closson 2013

2
seamlessHTML5 사양에서 제거되었으므로 지원되지 않습니다. @ForTheWatch의 대답 은 이제 최고입니다.
rvighne

48

여기에 있는 다른 게시물 에 따라 가장 좋은 해결책은 CSS 항목을 사용하는 것입니다.

style="border:0;"

6
나는 그들이 추천한다고 생각한다 : border-width: 0pxTBH. border: none;작동하지 않을 것이다.
Solomon Closson 2013

5
@ cnotethegr8-IE 및 Opera (현재 버전)에서 작동하지 않으며 Chrome, Safari 및 / 또는 Firefox에서 테스트되지 않았습니다. 나는 엉뚱한 브라우저를 테스트합니다. 왜냐하면 그것이 작동한다면 다른 브라우저에서도 작동하는 것보다 거의 확실하기 때문입니다.
Solomon Closson 2013-07-27

2
@SolomonClosson I test for the crappy browsers, because if it works in them, than it is almost sure to work in the others.순진한 세상에 . 앱이 브라우저에서 작동하는지 확인하려면 해당 브라우저에서 간단하고 간단하게 테스트 해야 합니다. 보장은없고 단지 기이함 만 있습니다.
Jonathan Dumaine 2015

1
참고로 0px 단위는 중복됩니다. 여백을 선호합니다 : 0; 또는 테두리 : 0; CSS에 관해서는 0px == 0em == 0 % == 0이기 때문입니다.
csharpforevermore

1
이제 seamless스펙에서 제외 된이 유일한 정답입니다
rvighne

17

때문에 frameborder속성이 IE에만 필요, 발리를 해결하기 위해 또 다른 방법이있다. 이것은 자바 스크립트 나 DOM 조작이 필요없는 가벼운 방법입니다.

<!--[if IE]>
   <iframe src="source" frameborder="0">?</iframe>
<![endif]-->
<!--[if !IE]>-->
   <iframe src="source" style="border:none">?</iframe>
<!-- <![endif]-->

3
이것은 질문에 대한 최상의 답변입니다. 그러나 HTML5 준수 의 목표 (진행 중이며 예고없이 변경 될 수 있음)는 유용하지 않습니다. 특히 그러한 준수 이외의 다른 목적에 부합하지 않고 코드를 더 복잡하게 만드는 트릭을 사용하게 만드는 경우에는 유용하지 않습니다. . frameBorder="0"인라인 프레임 주위에 테두리를 원하지 않는 경우 계속 사용 하는 것이 가장 좋습니다 .
Jukka K. Korpela 2014 년

물론 사실입니다. frameborder 속성은 순전히 표현 적이므로 표준이 아무리 변경 되더라도 HTML 표준으로 돌아갈 가능성이별로 없다는 점에 유의하십시오.
Mr Lister 2014 년


@ JukkaK.Korpela 잠깐, 뭐? 그렇다면 OP에 유효성 검사 오류가 발생하는 이유는 무엇입니까? 아, 죄송합니다, 당신이 링크 페이지에 관한 frame하고 frameset,하지 iframe. 속성 iframe 요소에서 사용되지 않습니다 . 참조 w3.org/TR/html5/obsolete.html#attr-iframe-frameborder
Mr Lister

기능이 더 이상 사용되지 않는 것으로 선언 되었기 때문에 유효성 검사 오류가 발생합니다. 이는 실제로 메시지를 발행하는 것 이상을 의미하지 않습니다. HTML5 CR에 따르면 속성은 여전히 HTML5에 정의 되어 있으며 브라우저는이를 계속 지원할 것으로 예상됩니다.
Jukka K. Korpela 2014 년


2

XHTML에 대상 속성을 붙여 Javascript로 유효성 검사기를 "속이는"기술에 대해 동일한 방법을 사용하는 것은 <a onclick="this.target='_blank'">어떻습니까?

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

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

또는 getElementsByTagName]("iframe")1 페이지에있는 모든 iframe을이 속성을 추가?

IE에서 아무것도 작동 하지 않는다는 것을 의미하는 작업을 수행했기 때문에 이것을 테스트하지 않았습니다 . :) 그래서 내가 그것을 분류하는 동안 ... :)


0

여기 에서 IE7 에서 작동 할 수있는 좋은 방법을 찾았 습니다 . frameBorder 속성에 대한 유효성 검사기를 우회하지만 게시물에 설명 된대로 향후 브라우저를 위해 CSS를 유지합니다.


자바 스크립트를 사용하여 iframe을 생성 하시겠습니까? CSS 경고 메시지를 제거하기 위해 iframe 콘텐츠의로드 시간을 더 지연시킵니다. 수락 된 답변처럼 seamless대신 속성 을 사용하는 것이 좋습니다 .
Raptor

예, 그러나 IE7에서 원활하게 작동하지 않았으므로 내 게시물입니다.
sareed

-5
style="border:none; scrolling:no; frameborder:0;  marginheight:0; marginwidth:0; "

11
가치 : 이것은 잘못된 코드입니다. scrolling, frameborder, marginheight / width는 CSS 속성이 아닙니다.
패트릭 Affentranger
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.