상속 - 우수한 라이브러리

이의이 워드 프레스에 의해 생성 된 페이지 ~~some comments~~¹⁾를 살펴 보자 (그것은 내가 관리 사이트 아니에요, 난 그냥 궁금하네요 여기서 무슨 일이 일어나고 있는지). 가까운 장래에 이러한 페이지가 사라질 수 있으므로 온라인에서 일부 스크린 샷을 올렸습니다. 여기에 내가 본 내용은 다음과 같습니다상속

물론, 목록 항목 마커가 안된다. 그래서 Firebug를 사용하여 소스를 살펴보기로했습니다. 보시다시피 방화범은 list-style 속성 (none 포함)이 ol.commentlist에서 상속되었다고 주장합니다. 그렇다면 원과 사각형이 보이는 이유는 무엇입니까? 계산 된 스타일을 확인할 때 Firebug는 list-style-type을 올바르게 표시합니다.

올바른 동작은 무엇입니까? 난 그냥 그 웹 인스펙터 현실의 더 나은 전망을했다 (목록 항목 마커가이 브라우저에 표시되었다) 크롬의 빠른 검사, 한 : 웹킷에 따르면

을 ol.commentlist의 list-style은 아니다 상속되며 렌더링 엔진에서 기본값 인 list-style-type 만 상속받습니다.

따라서 두 브라우저의 출력이 정확하고 Firefox (방화 광구)가 잘못된 상속 된 표현을 보여줄 수 있습니다. CSS specification의 내용은 무엇입니까?

상속 LI 요소 OL 및 UL 요소로부터 list-style 값을 전송한다. 이것은 목록 스타일 정보를 지정하는 권장 방법입니다.

ol의 상속에 관한 내용은 ul에 해당하지 않습니다. 이 점에서 Firebug가 잘못되었거나 ol에서 ul (일부) 속성을 상속 받아야합니다 (그렇다면 완전히 다른 두 브라우저에서 요소가 렌더링되지 않는 이유는 무엇입니까?). 명확한 내 실제 질문 : 어떤 속성을 중첩해야 ul 요소는 그들을 둘러싸는 ol 요소를 상속해야합니까?

편집 : 나는 오페라에 대해 잊고 해당 브라우저의 속성을 볼 때 사진이 더욱 분명해진다 :

오른쪽 창에서 알 수 있듯이, 중첩 ul 요소는 ol에서 속성을 상속 할 요소가 있지만 브라우저의 기본값 인 list-style-type과 list-style-position은 해당 상위 요소에 의해 지정된 값보다 우선합니다.

Vinhboy가 어딘가에있는이 버그 (Firefox? Firebug?)에 대한 나의 의혹을 뒷받침하면서 나는 bug report을 제출했습니다.

BTW, 나는 마커가 명시 적으로 none에 ul.children의 list-style을 정의 할 때 단지

ol.commentlist, li.commentlist, ul.children {

에있는 style.css의 라인 (312)을 변경하여 사라질 수 있도록 관리, 마커는 페인트되지 않습니다. 원한다면이 경우 스크린 샷 Firebug과 WebKit의 Web Inspector을 볼 수 있습니다. 당신이 즉석에서 CSS를 편집하지 않고 (더 이상이 문제를 볼 수 있도록

1) 페이지의 개발자에게 문의 후 그는), 원치 않는 목록 마커를 해결했습니다. 스크린 샷을 보면서 이것이 무엇인지 알아볼 수도 있지만 테스트 케이스를 작성하여 bug report에 추가했습니다. 모든 사람의 편의를 위해, HTML/CSS 소스 읽

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>&lt;ol&gt;/&lt;ul&gt; inheritance test case</title> 
    <style> 
    ol { 
    list-style: none; 
    } 
    </style> 
</head> 
<body> 
    <!-- Some of the text below is quoted from D.E. Knuth, The TeXBook, p. 395 --> 
    <ol> 
    <li>First item</li> 
    <li>Second one</li> 
    <li>Now let's have some fun with a nested &lt;ul&gt;: 
    <ul> 
    <li>First item</li> 
    <li>And the second one again (this is incredibly boring, but it's just an example)</li> 
    <li>Ho hum</li> 
    <li>Are you still there?</li> 
    </ul> 
    </li> 
    <li>Just another item</li> 
    </ol> 
</body> 
</html>

는 그냥 ul를 선택하고 방화범이하지 않았다 비록 우리가 볼 때,합니다 ( ol에서 목록 스타일 속성 을 상속 있다고 통지 실제로 렌더링 된 페이지).

WebKit의 웹 검사기와 특히 Opera 변형과 비교하십시오. 후자의 explicitly makes clear은 브라우저의 기본값 인 list-style-type 및 list-style-position으로 되돌아갑니다.

출처

2010-04-14 Marcel Korpel

아주 좋은 관찰. 그것은 방화범이 잘못된 것 같습니다. – vinhboy

글쎄, 내 질문이 무엇인지 모르겠다. – graphicdivine

@graphicdivine : 나는 이미 그것을 두려워했다. 일을 분명하게하기 위해, 나는 실제적인 질문을 굵은 활자체로 설정했다. 링크 된 원본 페이지가 고정되어 있으므로 최소한의 테스트 케이스도 추가했습니다. –

사실, 스타일 상속에 대한 가정은 조금 벗어났습니다. 상속은 ol.commentlist이 아닌 li.commentlist 일 것입니다. 불일치의 이유는 Firefox가 목록 래퍼뿐만 아니라 목록 항목에도 스타일 지정 스타일을 허용하기 때문입니다. 정렬되지 않은 목록에서 총알을 완전히 비활성화하려면 UL 태그의 목록 유형을 설정해야합니다. 그래서 항상 목록 유형을 목록 래퍼에서 제거하고 목록 항목에 적용하는 이유입니다.

이것은 우리 모두가 배우고 조정해야하는 브라우저 간의 렌더링 차이 중 하나 일뿐입니다. 이러한 불일치의 또 다른 예는 BODY 태그에 여백과 패딩을 사용하는 것입니다. 제거하는 모든 브라우저에서 일관되게 렌더링을 유지하려면 여백을 설정 한 다음 패딩을 설정하십시오.

출처

2010-04-20 22:29:12 JoeFlash

상속

답변

관련 문제