jQuery로 설정 한 여백은 요소의 너비를 변경합니다.

Question

홈 페이지에 몇 개의 버튼이있는 웹 사이트가 있습니다 : http://www.bniolsztyn.pl (폴란드어, 죄송합니다).

<div class='more-link'> 
    <a href='#'>Read more...</a> 
</div> 

그들의 스타일은 다음과 같습니다 :

다음과 같은 마크 업 몇 파란색 버튼이 있습니다

div.more-link a { 
    padding: 8px 20px; 
    color: #d0d0d0; 
} 
div.more-link { 
    width: 100%; 
    height: 12px; 
    padding: 6px 0; 
    margin: 4px 0; 
    text-align: center; 
    background: url(/sites/all/themes/bni/img/button.png) center repeat-x; 
    background-color: #1a3754; 
    background: -moz-linear-gradient(top,#5190cf 0%,#27527e 48%,#1a3754 52%,#234a71 100%); 
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#5190cf),color-stop(48%,#27527e),color-stop(52%,#1a3754),color-stop(100%,#234a71)); 
    background: linear-gradient(top,#5190cf 0%,#27527e 48%,#1a3754 52%,#234a71 100%); 
    border: 1px solid #5190cf; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5); 
    -moz-box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5); 
    box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5); 
} 

내부 <a> 태그가 양쪽에 고정 20 픽셀 패딩 :

jQuery를 사용하면, 나는 그것이 전체 부모 사업부를 차지하게 다음과 같이

JQuery와 코드는 다음과 같습니다

$(document).ready(function(){ 
    $('div.more-link a').each(function(){ 
     var container = $(this).parent().width(); 
     var link = $(this).width(); 
     var pad = Math.floor((container - link)/2); 
     $(this).css({ 
      paddingLeft: pad + 'px', 
      paddingRight: pad + 'px' 
     }); 
    }); 
}); 

지금, 모든 파이어 폭스, 오페라 및 Internet Explorer에서 잘 작동합니다. 그러나, 크롬은 독특한 방법으로 jQuery 코드에 반응을 보인다는 오른쪽에있는 버튼 텍스트 전치, 결과적으로, <a> 태그의 폭을 줄이고 : 처음에는

를, 나는 그것이 box-sizing 문제라고 생각했지만 그렇게되지는 않습니다. jQuery에 의해 추가 된 인라인 패딩을 사용하지 않으면 요소의 너비가 정상으로 돌아갑니다 (이 쿼크를보기 위해서는 왼쪽 및 오른쪽 패딩 값 모두 설정해야합니다).

Chrome 8.0.552.215 및 jQuery 1.4.4를 사용하고 있습니다.

이 문제는 Chrome의 알려진 문제입니까 아니면 내 측면에서 '끔찍한 실패'인가요? 코드에 문제가 있습니까? 오류를 재현 할 수 있습니까?

Answer 1

나는 이것을 해내 기 위해 JQuery가 필요하다고 확신하지 않는다. 간단히 "<a>"텍스트를 컨테이너 "button"가운데에 놓으려고합니까? <div>? 그렇다면, 당신은 CSS와 함께이 작업을 수행 할 수 있습니다

div.more-link a { 
    color: #d0d0d0; 
    display:block; 
    line-height: 24px; 
} 
div.more-link { 
    width: 100%; 
    height: 24px; 
    margin: 4px 0; 
    text-align: center; 
    background: url(/sites/all/themes/bni/img/button.png) center repeat-x; 
    background-color: #1a3754; 
    background: -moz-linear-gradient(top,#5190cf 0%,#27527e 48%,#1a3754 52%,#234a71 100%); 
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#5190cf),color-stop(48%,#27527e),color-stop(52%,#1a3754),color-stop(100%,#234a71)); 
    background: linear-gradient(top,#5190cf 0%,#27527e 48%,#1a3754 52%,#234a71 100%); 
    border: 1px solid #5190cf; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5); 
    -moz-box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5); 
    box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5); 
} 

공지 사항은 단순히 사업부의 높이를 조정 두 요소에서 패딩을 제거하고, <a>에 display:block; 및 line-height:24px;을 추가했다.

편집 : 위의 코드는 분명히 전체 "버튼"을 클릭 할 수있게합니다.