2012-08-01 6 views
1

개발중인 페이지에 고정 요소가 있습니다. 여기에는 로고와 몇 개의 탐색 링크가 포함되어 있습니다.SyntaxHighlighter 및 고정 요소의 오버 플로우 문제

위 사이트에서 다양한 언어로 코드 스 니펫을 제시해야합니다. Alex Gorbatchev의 SyntaxHighlighter를 사용하여 구문을 색칠합니다. 문제는 스타일이 지정된 코드가 고정 요소 위로 흐른다는 것입니다. 여기가 주범이 shCore.css 것 같다 아주 간단한 예 on JSFiddle

enter image description here

:

여기처럼 보이는거야. 제거하면 오버플로가 사라집니다. 불행히도, 그것의 제거는 또한 라인 번호가 해당 코드 라인과 동기화되지 않게합니다.

내 스타일 시트뿐만 아니라 파일 안의 CSS를 부지기 시작했습니다. 나는 SynthHighlighter 생성 요소와 내 자신 모두에서 overflowfloat 값의 다양한 조합을 시도했지만 아무것도 작동하지 않는 것 같습니다.

나는 동봉 된 스타일 시트가 방대하고 버그를 찾기 위해 지루한 작업을하지만, 더 간단하게 만들 수는 없다는 것을 알고있다. 나는 2 시간 동안이 어리석은 문제에 대해 지금 일해 왔기 때문에 여기서 질문을하기로 결정했다.

어떤 종류의 지루한 영혼이 나를 도울 수 있습니까? 전에 SyntaxHighlighter에 이런 종류의 문제가 있었습니까? 간결하다고 생각하시는 분은 투표를하지 마십시오. 문제가 해결되면 답변을 게시하겠습니다. 그것은 누군가가 만나는 것이 쉬운 것처럼 보입니다.

또한 어떤 CSS 속성이 이러한 동작을 일으킬 수 있는지 제안하는 모든 의견 ()을 받게되어 기쁘게 생각합니다. 어쩌면 내 overflow 추측은 꺼져 있습니다.

아니면 구문 컬러링 라이브러리를 변경하면 좋은 해결책이 될까요?

답변

1

프런트 엔드 경험이 2 년인 동료가이 문제를 해결하는 데 도움이되었습니다. 나는 그것이 얼마나 간단한 지 알기 위해 난처했다.

고정 된 요소에 z-index 속성을 추가하여 효과적으로 포어 그라운드로 이동해야했습니다.

여기에 working example on JSFiddle