html 중앙 링크에 display:block을 사용할 때 IE 사용시 문제




li float left (6)

나는 동일한 문제가 있었고 위의 해결책 중 어느 것도 나를 위해 일하지 않았다. 나는 또한 투명하게 링크의 배경이 필요했습니다.

매우 불편한 해결책이지만, 완벽하게 작동하는 것은 배경을 투명한 gif로 설정하는 것입니다. 반복되므로 1x1 픽셀 만 필요합니다.

#links a
{
    display: block;
    background: url(/images/interface/blank/1dot.gif);
}

이것은 서버에 대한 하나의 추가 요청을 제외하고 부작용이없는 것 같습니다.

이것은 내 HTML입니다.

<div id="links">
  <a href="">Link 1</a>
  <a href="">Link 2</a>
  <a href="">Link 3</a>
  <a href="">Link 4</a>
</div>

그리고 이것들은 CSS 스타일입니다 :

#links {
    position: absolute;
    border: 1px solid #000;
}

#links a {
    display: block;
}

#links a:hover {
    background-color: #CCC;
}

이것은 링크 목록을 표시합니다. 문제는 IE에서 텍스트 링크를 직접 클릭하여 링크를 클릭 할 수 있다는 것입니다. 다른 브라우저에서는 그렇지 않습니다 (텍스트 링크 또는 그 밖의 다른 곳을 클릭 할 수있는 곳). 링크 블록에 있음), 거기에 대한 수정 사항이 있습니까 (CSS 만 포함, 자바 스크립트 없음)?

링크 나 div의 너비를 지정하고 싶지는 않습니다.


좋습니다,이 문제에 대한 수정은 앵커에게 투명이 아닌 백그라운드 속성을주는 것입니다. 일부는 앵커에게 투명한 배경 이미지를 제공 할 것을 제안했습니다. 나는 이것에 추가했다 : 이미지가 존재할 필요는 없다. 간단히 경로를 쓸 수 있으며 작동하게 만들 것입니다.

a {
  background:url('dummy/doesnotexist.png') no-repeat;
}

링크 텍스트는 span 요소로 묶어야합니다. 그런 다음 해당 범위 내에서 클릭을 수락합니다.


나는 이유를 모르지만 앵커에게 배경색을 주면 나에게이 문제를 해결하는 것처럼 보였다.


자세를 취하십시오 : 친척; 귀하의 CSS에서 #links {}

이렇게

그것은 그것을 고칠 것이다 :)


배경색을 #FFF로 설정하고 불투명도 0을 설정하면 IE9, Chrome 및 Firefox에서 저에게 효과적입니다. 다른 버전에 대해 몰라. 투명하게 설정해도 도움이되지 않았습니다.

이것은 순수한 CSS와 크로스 브라우저의 장점을 가지고 있기 때문에 더 나은 대안이 될 수 있습니다.





internet-explorer