YUI CSS 재설정으로 인해 <strong><em>작동하지 않음</em></strong>

StackOverflow https://stackoverflow.com/questions/20107

  •  09-06-2019
  •  | 
  •  

문제

YUI의 이 줄은 CSS 재설정 나에게 문제를 일으키고 있습니다:

address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
    font-weight: normal;
}

그것은 나의 em 이탤릭체가 아니고 내 strong 대담하지 않습니다.괜찮습니다.내 스타일시트에서 이를 재정의하는 방법을 알고 있습니다.

strong, b 
{
  font-weight: bold;
}

em, i 
{
  font-style: italic;
}

문제는 둘 다인 텍스트가 있을 때 발생합니다. em 그리고 strong. 

<strong>This is bold, <em>and this is italic, but not bold</em></strong>

나의 규칙 strong 굵게 표시하지만 YUI의 규칙은 em 다시 정상으로 만듭니다.이 문제를 어떻게 해결하나요?

도움이 되었습니까?

해결책

귀하의 강력한 선언이 YUI 뒤에 오면 이를 무시해야 합니다.다음과 같이 강제할 수 있습니다.

strong, b, strong *, b * { font-weight: bold; }
em, i, em *, i * { font-style: italic; }

여전히 IE7을 지원한다면 다음을 추가해야 합니다. !important.

strong, b, strong *, b * { font-weight: bold !important; }
em, i, em *, i * { font-style: italic !important; }

이것은 효과가 있습니다 - 직접 확인해보세요:

/*YUI styles*/
address,caption,cite,code,dfn,em,strong,th,var {
  font-style: normal;
  font-weight: normal;
}
/*End YUI styles =*/

strong, b, strong *, b * {
  font-weight: bold;
}

em, i, em *, i * {
  font-style: italic;
}
 <strong>Bold</strong> - <em>Italic</em> - <strong>Bold and <em>Italic</em></strong>

다른 팁

이 규칙을 사용하여 YUI 재설정을 재정의합니다.

strong, b, strong *, b *
{
  font-weight: bold;
}

em, i, em *, i *
{
  font-style: italic;
}

YUI Reset.css를 사용하는 것 외에 YUI base.css도 사용하는 경우 표준 크로스 브라우저 기본 스타일 세트로 모두 설정됩니다.

링크: http://developer.yahoo.com/yui/base/

내 스톡 CSS 파일 상단에 YUI 재설정을 추가했을 때 비슷한 문제가 발생했습니다.나는 나에게 가장 좋은 방법은 단순히 모든 것을 제거하는 것임을 알았습니다.

font-weight: normal;

YUI Reset의 선언.나는 이것이 "크로스 브라우저"에 영향을 미친다는 것을 알지 못했습니다.

내 모든 선언은 YUI 재설정 이후에 이루어졌는데 왜 적용되지 않는지 잘 모르겠습니다.

스타일을 재설정한 후에 로드되는 한 작동할 것입니다.이건 무슨 브라우저인가요?나 자신도 비슷한 방식으로 작업하고 이 문제를 겪지 않았기 때문에 이것이 내 테스트에 잘못이 있는 것인지 궁금합니다.

재설정 스타일시트는 기본으로 사용하는 것이 가장 좋습니다.em 또는 Strong을 재설정하고 싶지 않다면 스타일시트에서 제거하세요.

Chris가 말했듯이 그들이 제공하는 CSS를 종교적으로 정확하게 사용할 필요는 없습니다.귀하의 서버에 사본을 저장하고 귀하의 필요에 맞게 편집하겠습니다.

YUI 파일 해킹과 관련된 모든 것을 피하는 것이 좋습니다.나중에 외부 라이브러리를 업데이트할 수 있어야 하며 사이트가 편집된 버전에 의존하는 경우 문제가 발생할 가능성이 높습니다.나는 이것이 당신이 사용하는 모든 타사 라이브러리에 대한 일반적인 좋은 방법이라고 생각합니다.

그래서 나는 생각했다 이것 대답은 더 나은 것 중 하나였습니다

YUI Reset.css를 사용하는 것 외에 YUI base.css도 사용하는 경우 표준 크로스 브라우저 기본 스타일 세트로 모두 설정됩니다.

나는 당신이 말하는 것을 봅니다.다음과 같은 CSS 규칙을 추가할 수 있을 것 같습니다.

strong em { font-weight: bold; }

또는:

strong * { font-weight: bold; }

나는 이상적인 해결책이 있다고 생각했습니다.

strong, b 
{
  font-weight: bold;
  font-style: inherit;
}

em, i 
{
  font-style: italic;
  font-weight: inherit;
}

불행히도 인터넷 익스플로러는 "상속"을 지원하지 않습니다. :-(

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top