IE에서 작동하지 않는 Javascript를 통해 CSS 링크 패딩이 추가되었습니다.

Question

답변을 먼저 검색해 보았습니다 만 이것이 가장 중요한 경우 인 것 같습니다.

JavaScript를 통해 링크에 클래스를 추가하고 있습니다. 실제로는 잘 jQuery이지만이 경우 중요하지 않다고 생각합니다. 이 클래스는 배경 이미지 및 일부 패딩으로 아이콘을 추가합니다. 패딩 및 배경 이미지가 특정 링크에 나타나지 않습니다. 문제는 IE8에서 나타나지만 놀랍게도 IE7에서는 잘 작동합니다. 나는 IE9/10을 테스트 할 수 없다. Firefox에서 잘 작동합니다.

필자는 코드를 최소한으로 줄이고 문제를 설명하는 jsFiddle을 만들었습니다. http://jsfiddle.net/toxalot/fsdcu/

여기에 코드를 추가해 보겠습니다.

<style type="text/css"> 
body { background-color: #fff } 
a:hover { background-color: transparent; color: #c30 } 
ul { padding-left: 40px } 
.iconNewWindowLeave { padding-right: 15px; background-color: #ccc } 
</style> 
<ul> 
    <li style="float: left"><a class="iconNewWindowLeave" href="#">left link</a></li> 
    <li style="text-align: right">some stuff on the right</li> 
</ul> 
<ul> 
    <li style="float: left"><a class="linkExternal" href="#">left link</a></li> 
    <li style="text-align: right">some stuff on the right</li> 
</ul> 
<script type="text/javascript"> 
$('.linkExternal').each(function() { 
    $(this).addClass('iconNewWindowLeave'); 
}); 
</script> 

예에서 이미지를 제거하고 일러스트레이션을 위해 배경색을 추가했습니다. IE 8에서는 두 번째 링크에 오른쪽 패딩이 없습니다. 링크를 가리키면 패딩이 추가됩니다. a : hover CSS를 제거하면 마우스를 올려 놓아도 문제가 해결되지 않습니다. 플로트를 제거하면 문제가 사라집니다. 다른 CSS를 제거하면 문제가 해결됩니다.

그래서 원인을 좁혔지만, 어떻게해야할지 모르겠습니다. 기존 코드를 삭제하거나 변경하고 싶지 않습니다. 사이트 레이아웃에 모두 필요합니다. 가능한 경우 에 몇 가지 CSS 또는 JavaScript를 추가하여 수정하고 싶습니다. 사소한 문제지만, 저를 괴롭 히고 있습니다. 또한 문제가 IE의 최신 버전에 나타나는지 여부에 대해서 궁금합니다.

Answer 1

은 추가하려고하십시오 display:inline-block; 또는 display:block; 당신이 페이지에 대한 몇 가지 떠있는 컨테이너를 보낼 때마다

(테스트하지)

.iconNewWindowLeave { padding-right: 15px; background-color: #ccc; display:inline-block; } 

Answer 2

은 항상 부모 컨테이너를 취소 .iconNewWindowLeave 할 수 있습니다. 귀하의 경우에는 ul에 왼쪽 스타일을 추가하십시오. 그게 효과가있다.

그리고 응용 프로그램을 통해 많은 float을 사용하는 경우 상위 컨테이너에 clearfix 클래스를 추가하는 것이 좋습니다.