이것은 이상한 시간이며, 많은 시간을 먹었습니다. 여기에 1 링크 만 넣을 수있는 사진이 있습니다 : http://www.screencast.com/t/byVmPE6H. 설명이 이어집니다.IE8/jquery에서 CSS 패딩이 사라졌습니다.
기본적으로 내가 달성해야하는 것은 사진의 포인트 1입니다.
왼쪽 패딩이 오른쪽 패딩보다 큽니다. 초기 패딩 속성은 다음과 같습니다.
padding: 12px 15px; (예 : 12px 수직 패딩, 가로 15px)
그런 다음, JQuery와 통해 페이지로드, 난과 같이 어떤 값으로 왼쪽 패딩을 설정
이$(links[0]).attr("style","padding-left : "+padding+"px;");이 (내가 사용에 .css (했습니다 수), 효과 및 문제가 동일하게 유지)
IE를 제외한 모든 브라우저에서 올바르게 작동합니다. 나는 버전 6이나 7에 대해서 이야기하는 것이 아니라 Internet Explorer 8에 대해서만 말하고 있습니다. IE 8에서는 페이지로드시 위의 사진에서 포인트 2를 얻습니다.
페이지로드시에만 발생합니다. 링크 위로 포인터를 가져 가면 (마우스 오버 이벤트가 트리거 됨) 올바른 채우기가 제자리로 돌아오고 첫 번째 링크와 마찬가지로 완벽하게 보입니다 (실제로 첫 번째 사진은 IE8에서 제공됨).
위의 jquery 행을 제거해도 동일한 동작이 발생하지는 않지만 15px 패딩은 정상입니다. 링크에는 "mouseover"에 등록 된 이벤트 핸들러가 없습니다. 단지이 CSS 속성은 마우스 오버를위한있다 :
#navigation li.first:hover a{
background: transparent url(../images/menu_on_left.png) left top no-repeat;
}
(즉, 단지 배경 이미지 변경, 다른 사람이 전혀 없음) 그래서
때 페이지가로드되는 경우 jquery를 사용하여 왼쪽 패딩을 변경하면 오른쪽 디스프레이가 발생합니다. 마우스 오버시 오른쪽 패딩이 다시보기로 나타납니다. 왜 이런 일이 일어 났는지 나는 설명 할 수 없다. 만약 내가 해결책을 찾을 수 없다면 나는 실제로 모든 메뉴 항목의 위치를 계산하고 position : absolute로 배열 할 것을 생각하고있다. 정말 나쁜 것 같아. 알아.
누구나 나를 밝힐 수 있습니까?