글꼴을 변경 한 여분의 공간

템플릿을 정리하려고하는데 추가 픽셀이 추가되어 호버 효과와 머리글/바닥 글이 오버플로되는 문제가 발생합니다.글꼴을 변경 한 여분의 공간

링크의 위로 마우스를, 그 픽셀을 이동 할 때 당신이 볼 수 있듯이. 모든 스타일 시트는 반응 형이되도록 허용합니다. 글꼴 크기를 1em로 유지하면 모든 것이 정상적으로 작동하지만 단순히 글꼴 크기를 .75em로 변경하면 글꼴 크기가 약간 작아집니다.

CSS Direct Link

업데이트 :이 "해키"으로 간주하지만 난 링크 용기의 행 높이를 변경하지 않고 글꼴 크기를 변경할 수 있도록 제가 링크 용기의 각 내부 스팬의를 넣어 것 확실하지합니다. 그게 잘 작동하는 것 같아요

출처

2012-03-24 Colby

가 크롬에서 발생하지 않습니다 같은 폭을 유지합니다. – j08691

흠, 네 말이 맞아. FF로 체크인했지만 IE를 보았을 때 문제가 있습니다. – Colby

줄 높이 줄 높이을 추가 또는 삭제 해보세요. 예를 들어

<div style="line-height:30px;">Div content</div>

출처

2012-03-24 21:14:41

이것도 참조 http://www.w3.org/TR/WCAG20-TECHS/C21.html – dotoree

그래, 나는 그 자체와 그 부모님을 위해 노력했다. 문제는 라인 높이를 사용하여 컨테이너 내부의 링크를 수직으로 가운데 맞추기 위해서입니다. – Colby

@Colby는 수직 정렬을 위해 패딩을 시도합니다. 상단 아래쪽 패딩 (예 : 10)을 추가하고 높이를 2 배 (여기서는 20)로 낮추십시오. –

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#header').css('width', $("#header").width()); 
    }); 
</script> 
<li id="header"><a href="#">Header</a><li>

항상

출처

2012-03-24 21:27:17

흠 :/폭이 문제가 아닌지 확실하지 않다. – Colby

글꼴을 변경 한 여분의 공간

답변

관련 문제