Firefox 앵커 개요 문제

다음 스 니펫이 QA 두통을 유발합니다.Firefox 앵커 개요 문제

<div id="links-container"> 
    <ul> 
    <li class="resource-link li-sep"><a href="http://www.somesite.com/members/category/?catID=8" target="_blank"><em>Enjoy family-friendly</em>ACTIVITIES AND ATTRACTIONS <span>&raquo;</span></a></li> 
    <li>...etc...</li> 
    </ul> 
</div>

나는 이것을 CSS에서 시도했지만 아무 것도 작동하지 않는다. 무슨 일

#links-container ul li a { color:#C28234; } 
#links-container ul li a span { font-size:140%; line-height:1em; } 
#links-container ul li a em { display:block; font-family:Georgia; font-weight:normal; margin-bottom:-6px; } 
#links-container ul li a:focus em, #links-container ul li a:active em { outline:none; } 
#links-container ul li a:hover { color:#75450A; }

은 당신이 링크를 통해 탭은 서로 인접 해 있고 중복 윤곽을 일으키는 텍스트의 두 세트의 주위에 윤곽을 만드는 파이어 폭스,있다.

우리의 프로젝트 관리자는 접근성을 높이기 위해 개요를 유지하고자합니다.

Chrome에서 보시면 앵커의 전체 내용을 윤곽선으로 감쌀 것입니다. 그리고 우리는 이것이 완벽하다고 생각합니다. 내 질문은, 파이어 폭스에서 이것을 복제 할 수있는 일을 할 수 있는가하는 것이다. 또는 최소한 Firefox가 개별적으로 동일한 링크의 각 텍스트 항목을 설명 할 때 외곽선이 배설물처럼 보이지 않도록 정리하십시오.

다른 사람도이 문제를 해결해야합니까? 그렇다면, 어떻게 그 과거를 지나쳤습니까?

감사

출처

2011-11-11 Skittles

. 부분적인 해결책이지만, 귀하의 경우에 효과가 있습니다. 메뉴 항목에 문제가있는 경우에만 "display : inline-block;"을 적용 할 수 있습니다. 여기에있는 링크를 통해 공통된 개요를 만들 수 있습니다.

예

: jsfiddle.net/zDbsQ/2/

편집 : 예에 대한 고정 링크, 원래의 잘못이었다.

출처

2011-11-11 22:39:44

감사합니다. Alexey! 참조 용 링크는 메뉴 항목이 아니라 표준 목록에있는 링크 목록입니다. 링크로 포커스가 설정 될 때까지 Chrome 및 탭으로 피들린 예제를 보면 크롬이 여러 줄 링크를 단일 윤곽선으로 설명하는 방법을 확인할 수 있습니다. Firefox는 각 텍스트 항목을 별도로 포장합니다. 링크가 좋지 않게 보이기 위해 Chrome이하는 일을 성취하고 싶습니다. 그게 가능한가? – Skittles

불행히도 웹킷 브라우저로 작동하는 솔루션을 찾을 수 없습니다. 어쩌면 존재할 수도 있지만 그것에 대해 모르겠습니다. 고정 된 예 (어떤 이유로 "display : inline-block;"이 없었습니다), 지금까지 할 수 있었던 것이 가장 좋습니다. –

알렉세이 ... 나는 아직도 네가 무엇을 바꿨는지 알아 내려고 노력하고 있지만 네가 한 일은 내가 필요로하는 것이었다! 많이 soooo 고마워요! 뛰어난 직업! – Skittles

당신은 그냥 사용할 수 있습니다 : 이것은 내 모든 요소를 선택하고 윤곽이 비활성화됩니다

#links-container ul li a *{ outline: none; }

.. 음

출처

2011-11-11 22:34:10 Kyle

Firefox 앵커 개요 문제

답변

관련 문제