요소의 줄 높이를 늘리면 각 텍스트 줄 사이에 간격이 생기기 시작합니다. 특정 간격이 보이지 않기 때문에 대부분이 시간은 괜찮습니다.텍스트 줄 사이의 간격 제거
그러나 좁은 열이 있고 여러 줄에 걸쳐 링크가있는 경우 문제가 발생합니다. 마우스를 링크 위로 이동하면 선 사이에 약간의 간격이 생기므로 링크 호버 효과가 깜박입니다.
디자인/사용성 관점에서 볼 때, 나는 이것이 나쁜 사용자 경험 (아무도 무작위로 깜박임을 좋아하지 않음)을 만든다고 생각합니다. 이 그것을 시도 :
내가 어떤 경우에는 이런 일을 방지하기 위해 링크에 약간의 패딩을 추가 할 수 있지만 텍스트가 큰 경우가 작동하지 않습니다; 나는 더 많은 패딩이 필요하다. 누구나 솔루션에 대한 아이디어가 있습니까?
너비가 좁은 열의 <a> 요소에 display : block을 설정하여 깜박 거리는 문제를 해결해보세요.
끔찍한 해결책은 아닙니다. 이 경우 문제는 마우스가 '생성 된 상자'에 있지만 실제 링크가 아니라 마우스 오른쪽 (즉, 오른쪽)에있을 때 호버 효과가 나타나는 것입니다. – DisgruntledGoat
당신이 각 라인의 둘레 스팬을 넣어 패딩을 설정하는 인라인 블록에
#wrap {font-size:14px; line-height:16px;}
a span{display:-moz-inline-block; display:inline-block;line-height:14px;padding:1px 0;}
a:hover {background:red;}
<div id="wrap">
dsvlaksvh; asvj asdfh;dhldv hd d dl h dfhd d dfh; daljfda k;d <a href="#" >
<span>hdv </span><span>dvh ldvhldf dhk </span><span>;dhkdf hdl hdfk
</span><span>dfhkldf h vkhg j</span></a> glj gj f gjl fjl fj f
</div>
의도적인지 확신 할 수 없지만, span {}에서는 두 번째 디스플레이가 안됩니다 : 인라인 블록이 -moz-inline-block보다 우선합니다? –
예. 그 순서는 ffx 2가 인라인 블록을 지원하지 않기 때문에 해킹이 필요하지만 ffx 3이 지원하므로 인라인 블록을 마지막으로 적용하면 적용됩니다. – wheresrhys
을 사용하여 상대 단위를 켤 수있는 각 라인의 시작과 끝 지점을 알고 있다면.
Firebug/Dragonfly를 사용하여 질문의 예제 링크에 padding: 0.2ex 0; background: red;을 추가하면 글꼴 크기 (CSS 또는 확대/축소를 통해 설정)에 관계없이 문제없이 작동합니다.
Firefox에서 글꼴 크기를 변경하는 유일한 문제는 배경이 이전 줄과 겹치기 시작한다는 것입니다. 그게 line-height 문제입니다.
정확하게는 "하지만 텍스트가 더 커지면 작동하지 않지만 더 많은 패딩이 필요합니다"는 것을 의미합니까? 예제를 제공해 줄 수 있습니까? 패딩에 상대 단위를 사용하지 않습니까? – mercator
위의 링크가있는 Firebug를 사용하여 시도해 볼 수 있습니다 (현재 고정되어 있음). 링크에 배경을 추가하면 간격이 표시됩니다. 패딩을 늘리면 간격이 사라집니다. 이제 글꼴 크기를 늘리면 간격이 다시 나타납니다. 따라서 패딩은 때로는 작동하지만 신뢰할 수 없습니다. – DisgruntledGoat