CSS 메뉴 막대 텍스트 문제

Question

가로로 배열 된 일련의 아이콘과 텍스트로 구성된 메뉴 모음을 만들려고합니다. 정렬되지 않은 목록을 컨테이너로 사용하고 있지만 문제가 있습니다. 텍스트가없는 모든 메뉴 항목, 배경 이미지가있는 빈 앵커 태그 만 인라인으로 표시됩니다.

그러나 배경 이미지 대신 메뉴 항목으로 텍스트를 사용하려고 할 때마다 텍스트 목록 항목이 아래쪽으로 밀려납니다. JSFiddle에서이 예제를 볼 수 있습니다. 각 항목을 롤오버하여 배경색 표시기가 어떻게 작동하는지 확인하십시오 : http://jsfiddle.net/pAfgm/6/.

지구본 아이콘이있는 링크 (예,이 예에서는 Facebook에서 핫 링크 된 링크)가 멋지고 깔끔하게 표시됩니다. 그러나 텍스트와 배경 표시기는 정렬 방식과 다릅니다. IE7이 아닌 FF 3.6, Opera 11의 경우입니다. 한 번, IE7은 다른 브라우저가있는 곳에 문제가 없습니다.

누군가이 문제를 해결할 수있는 방법을 보여줄 수 있습니까?

감사합니다.

Answer 1

vertical-align: top에 nav.pluginBar ul.pluginBarLeft li을 추가하기 만하면됩니다. display: inline-block도 있습니다.

참고 :이 문제의 원인 vertical-align 값이 baseline입니다http://jsfiddle.net/pAfgm/7/

기본.
http://www.brunildo.org/test/inline-block.html

는 그래픽에 대한 설명은 여기 "기준"절을 참조하십시오 :

여기에 다른 vertical-align 값 사이의 차이를 볼
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/