내 단추 배경이 늘어난 것 같습니다

Question

here을 볼 수 있도록 단추가 있습니다. 괜찮아 보이지? 음, 라이브 사이트에서 euroworker.no/shipping 및 /selectAddress 뻗어있는 것처럼 보입니다.

크롬, IE 및 Safari에서 잘 렌더링되었지만 FF 문제 일 수 있다고 생각했지만 FF로 바이올린을로드하고 정상적으로 보였습니다.

빠른 심판 CSS와 HTML :

#fortsett_btn { 
    background-image: url(http://euroworker.no/public/upload/fortsett.png?1269434047); 
    background-repeat:no-repeat; 
    background-position:left; 
    background-color:none; 
    border:none; 
    outline:none; 
    visibility: visible; 
    position: relative; 
    z-index: 2; 
    width: 106px; 
    height: 25px; 
    cursor:pointer; 
}​ 

그리고 HTML

<button type="submit" class="submit" id="fortsett_btn" title="Fortsett" value="">&nbsp;</button>​ 

I가 그것으로 무엇을 궁금해.

Answer 1

대신

<button type="submit" class="submit" id="fortsett_btn" title="Fortsett" value="">&nbsp;</button> 

이 시도 :

<button type="submit" class="submit" id="fortsett_btn" title="Fortsett" value="">Some value</button> 

는 다음 CSS

이 당신의 버튼을 라이브 사이트에 영향을받지 않는 이유는 아무 상관이없는, 그 단지 제안에 text-indent:-999px;를 추가 . 스타일 시트가 누락 되었기 때문에 버튼이 보이지 않을 수 있습니다 (잘못된 링크). 인라인으로 스타일을 시도한 다음 스타일 시트로 스타일을 복사하십시오.

Answer 2

이 문제를 잘 모르겠습니다. CSS는 각 경우마다 다릅니다. 바이올린에는 배경 반복이 설정된 단일 이미지가 반복되지 않도록 설정되어 있습니다. 라이브 사이트에서 background-repeat가 repeat-x로 설정된 다른 이미지 슬라이스가 있습니다. 그것들은 버튼을 스타일링하는 두 가지 다른 방법입니다.

바이올린 :

#fortsett_btn { 
background-image:url("http://euroworker.no/public/upload/fortsett.png?1269434047"); 
background-position:left center; 
background-repeat:no-repeat; 
border:medium none; 
cursor:pointer; 
height:25px; 
position:relative; 
visibility:visible; 
width:106px; 
z-index:2; 
} 

라이브 :

#product___specField_8 { 
-moz-border-radius:5px 0 0 5px; 
background-image:url("stylesheet/frontend/../../upload/orng_bg.png?1269434608"); 
background-repeat:repeat-x; 
border:1px solid #DDDDDD; 
float:left; 
font-size:24px; 
font-weight:bold; 
height:33px; 
padding-left:55px; 
width:124px; 
} 

왜 다른 무언가를보고 기대하지 않을 것이다?