CSS Pseudo 클래스 상속

내 CSS가 Opera에서 작동하지만 Firefox에서는 작동하지 않는 이유를 이해하려고합니다. 그 뒤에있는 효과는 버튼 위에 놓이면 드롭 다운을 표시하는 버튼입니다.CSS Pseudo 클래스 상속

<html> 
<head> 

<style> 

.dropcontrol { 
    background-color: red; 
} 

.dropdown { 
    display: none; 
} 

.dropcontrol:hover .dropdown { 
    display: block; 
} 

</style> 

</head> 
<body> 

<div class='dropcontrol'>TEST 

    <div class='dropdown'> 

     <ul> 

      <li>Test 1</li> 
      <li>Test 2</li> 
      <li>Test 3</li> 

     </ul> 

    </div> 

</div> 
</body> 
</html>

문제는 .dropcontrol:hover .dropdown 인 것 같습니다. Opera가 Firefox에서 작동하지 않는 이유는 무엇입니까?

감사합니다.

출처

2011-07-06 zchtodd

이 코드는 FF5, IE7/8/9에서 그대로 작동합니다. 어떤 Firefox 버전을 실행하고 있습니까? – Graham

3.5.9에서 나에게 부러졌습니다. 또한 몇몇 동료에게 일어나는 일이 있습니다. 나는 그들이 어떤 버전을 사용하고 있는지 알아야 할 것입니다. – zchtodd

는 나는이 코드를 함께 할 수 있다고 생각 : 당신이 .dropdown:hover을 추가하는 경우

.dropcontrol:hover .dropdown { 
    display: block; 
}

어떻게됩니까? 그게 도움이 되니? CSS로 다른 문제가 발생할 수도 있습니다. !important을 추가하면 도움이 될 것입니다. 다른 주에

, (당신이 더 문제를 알면 도움이 될 수있다)에만 파이어 폭스 또는 유일한 오페라와 가진 문제, 당신은 각 특정 브라우저 코드를 CSS로 이런 일을 할 수 있다면

파이어 폭스

@-moz-document url-prefix() { 
    #someID { 
     position: relative; 
     top: -1px; 
    } 
}

오페라

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { 
    #my-id { clear:right; } 
}

출처

2011-07-06 13:49:32

'.dropdown : hover'는'dropdown'이 맴돌고 있다고 가정합니다. 숨겨진 상태에서 시작되어 공개되지 않으면 불가능합니다. 또한 해킹에 뛰어든 경우 -1. – Shauna

난 특정 설정이 작동하지 않는 이유를 모르겠지만이를 수행하는 데 더 좋은 방법이 있습니다.

처음에는 모든 목록을 사용하여 수행하는 작업을 수행하는 것이 좋습니다. 당신은 사업부로 dropcontrol을 유지해야하는 경우 다음 당신은 dropdown DIV를 제거하고 UL 태그에게 dropdown 클래스를 제공하여 당신이 무엇을 정리할 수

<ul class="dropcontrol"> 
    <li>Test 
    <ul class="dropdown"> 
     <li>Test 1</li> 
     <li>Test 2</li> 
     <li>Test 3</li> 
    </ul> 
    </li> 
</ul>

: 그래서 당신은 같은이있을 것이다.

정확히 무엇을하려 하느냐에 따라 <select> 요소를 선택하는 것이 더 나을 수도 있습니다.

출처

2011-07-06 13:49:40 Shauna

여기 HTML 레이아웃이 마음에 들지만 CSS는 여전히 손상되었습니다. 위에서 언급했듯이 오래된 FF를 사용하고 있지만 일부 동료도 문제가있어 어떤 버전이 있는지 찾아야합니다. – zchtodd

다음은 파이어 폭스를위한 하나의 솔루션입니다. 필자는 Opera를 사용한 적이 없으며 드롭 다운이 게시 된 방식을 본 적이 없습니다. 이것은 내가 보통 그렇게하는 방법이다. 좋아

.dropcontrol { 
background-color: red; 
} 

.dropcontrol li ul { 
visibility:hidden; 
} 

.dropcontrol li:hover ul { 
visibility:visible; 
} 


<div class='dropcontrol'><ul><li>TEST 

    <ul> 

     <li>Test 1</li> 
     <li>Test 2</li> 
     <li>Test 3</li> 

    </ul> 
</li></ul> 

</div>

출처

2011-07-06 14:01:24 Pamela

는,이 파이어 폭스의 작동 방식을 변경하는 이유 완전히 확실하지 않다,하지만 대답은 XHTML-과도로 DOCTYPE 태그를 포함하는 것이었다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">

출처

2011-07-06 14:11:01 zchtodd

이것은 확실히 쿼크 모드와 관련이 있습니다. – BoltClock

CSS Pseudo 클래스 상속

답변

관련 문제