태그가 CSS를 재정의하도록 허용 하시겠습니까?

내 사이트에서 렌더링하려고하는 일부 사용자 생성 콘텐츠가 있습니다. 사용중인 서식있는 텍스트 상자 편집기는  태그를 사용하여 글꼴 변경 사항을 렌더링합니다.이 태그는 페이지의 CSS에 의해 재정의됩니다. 태그가 CSS를 재정의하도록 허용 하시겠습니까?

 태그를 사용하여 정의 된 규칙을 보여줄 수있는 방법이 있는지 아는 사람이 있습니까?

UPDATE
내 서식있는 텍스트 편집기를 위해 사용하고 컨트롤을 변경하는 옵션이 없습니다 내 사용자가  태그와 태그의 다른 유형의 차이를 이해하는 HTML에 대한 지식이 없기 때문에, I 내 문제를 해결하기위한 해킹을 만드는 것 외에는 선택의 여지가 없었습니다. 아래는 그것을 해결하기 위해 사용한 코드입니다. 모든  태그 속성을 인라인 CSS로 변경하는 jQuery 스크립트입니다.

(function() { 
    $('font[size]').each(function() { 
     var fontSize = this.size; 
     if (fontSize == 1) { 
      $(this).css("font-size", 8); 
     } else if (fontSize == 2) { 
      $(this).css("font-size", 9); 
     } else if (fontSize == 3) { 
      $(this).css("font-size", 11); 
     } else if (fontSize == 4) { 
      $(this).css("font-size", 15); 
     } else if (fontSize == 5) { 
      $(this).css("font-size", 20); 
     } else if (fontSize == 6) { 
      $(this).css("font-size", 25); 
     } 
    }); 
    $('font[face]').each(function() { 
     $(this).css('font-family', this.face); 
    }); 
    $('font[color]').each(function() { 
     $(this).css('color', this.color); 
    }); 
})();

출처

2008-11-10 Dan Herbert

1 년 늦 았지만 나도 공유 할 것이라고 생각했습니다.

나는 이것에 대해서도 좌절감을 느꼈습니다. 나는  태그를 생성 한 프리웨어 RTE JavaScript 구성 요소를 사용하고있었습니다. 그것은 클라이언트를위한 것이었고,이 CSS 오버라이드 문제를 해결하기위한 콜백이었다. 생각 후에 나는이 자바 스크립트 솔루션을 내놓았다 있도록

불행하게도, 다른 해결책으로는, 내 경우에는 일하지 :

var fontEl=document.getElementsByTagName("font"); 
for(var i=0;i<fontEl.length;i++) { 
    var f = fontEl[i]; 
    if(f.size) 
     f.style.fontSize=(Math.round(parseInt(f.size)*12*0.6)).toString()+'px'; 
    if(f.face) 
     f.style.fontFamily=f.face; 
    if(f.color) 
     f.style.color=f.color; 
}

글꼴 크기를 변환 공식은 잘못하지만, 믿을 수있는 결과를 얻을 수있을만큼 정확 .

출처

2010-01-04 07:58:57

나는 당신의 해결책을 좋아합니다. 그것은 내 것보다 훨씬 효율적입니다. 내 솔루션을 사용해 보았을 때 jQuery를 사용하고 있었습니까? 아니면 당신이하려고했던 것과 양립 할 수 없었습니까? 또한 변환 할 기수를 전달하지 않으면'parseInt()'가 위험 할 수 있습니다 : https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Global_Functions/ParseInt –

감사합니다 , 댄. Google의 API 라이브러리에 포함 된 최신 jQuery 버전을 사용했습니다. 나는 문서화하기로 결심했다. 이미 그것을 할 올바른 방법이라고 생각했다. 불운. 그런데 게시 된 코드에서 구문 오류가 발견되었습니다. 줄 3 : "var f = f;" - "var f = fontEl [i];"를 읽어야합니다. 기수를 전달하는 데 도움을 주신 데 대해 감사드립니다. 내가 몇 가지를 닦을 필요가있는 것처럼 보입니다! –

! important 속성을 구현하는 자신 만의 스타일로 CSS를 재정의하는 것이 좋습니다.

div.MyClass p 
{ 
font-size: 0.7em !important; 
}

기술적으로 글꼴 태그는 원본 텍스트에 가장 가까운 요소 인 경우 대부분의 스타일보다 우선합니다.

CSS의! important 속성을 사용하여 CSS를 덮어 쓰기가 어려울 수 있습니다.

출처

2008-11-10 18:25:41 thismat

태그가 표준을 따르지 않지만 필자가 사용중인 서식있는 텍스트 상자 편집기는 태그를 사용하여 텍스트를 생성하므로 선택의 여지가 있지만 허용해야합니다. 인라인 CSS로 스타일을 무시할 수는 있지만 태그는 수정되지 않습니다. –

폰트 태그가 텍스트에 가장 가까운 요소인지 확인하고 CSS에 중요한 스타일이 없다는 것을 확인해야합니다. – thismat

관련성이없는 정보를 제공합니다.문제는 태그에 관한 것이 아니며, 중요도 플래그로 poverriden이 아닌 경우 일반적으로 작동하며 작성자가 JS 수정 사항으로 이미 수행 한 것입니다. 그러나 문제는 ''에 대한 것이 었습니다. 가장 좁은 지역에도 불구하고 작동하지 않았습니다. –

요소의 style 태그로 변환 할 수 있습니다. 그 중 아무 것도 스타일 시트 정의 규칙보다 우선합니다.

출처

2008-11-10 18:28:02 sblundy

사실은 아니지만 인라인 요소를! important 속성으로 재정의 할 수 있습니다. – thismat

솔직히? 새로운 서식있는 텍스트 편집기를 만드십시오! TinyMCE 또는 FCKeditor 모두 괜찮습니다. 편집자가 설정 한 스타일이 게시 될 때 반드시 그런 식으로 나타나지는 않는다는 것을 사용자에게 이해 시키거나 교육 시키십시오. 과거에 FCKeditor로 한 번 수행 한 작업은 목록, 링크, 표제 등과 같은 기본 사항으로 툴바를 제한합니다. 스타일 지정 옵션은 전혀 없습니다.

출처

2008-11-10 18:36:50 roryf

는 다른 요소와 마찬가지입니다. 그것은 CSS를 사용하여 스타일을 지정할 수 있습니다. 글꼴 태그의 스타일을 다음과 같이 푸시 다운 할 수 있도록 CSS를 작성할 수 있습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <title></title> 
    <style type="text/css"> 
    body { color: black} 
    a { color: red; font-family: Sans; font-size: 14px;} 
    font * { color: inherit; font-family: inherit; font-size: inherit} 
    </style> 
    </head> 
    <body> 
    This is outside <a href="#">inside</a> outside. <font color="green" face="Times New Roman" size="20">Outside <a href="#">inside</a> outside</font>. 
    </body> 
</html>

출처

2008-11-10 20:05:26

그 유일한 문제는 태그 안에있는 모든 태그가 글꼴 태그 내의 링크 태그와 같이 자신의 스타일을 가지고 있어도 스타일이 덮어 쓰기된다는 것입니다. –

<font> 태그가 CSS를 재정의하도록 허용 하시겠습니까?

답변

<font> 태그가 CSS를 재정의하도록 허용 하시겠습니까?

답변

관련 문제