이상한 사파리 CSS 버그

안녕하세요,이 버튼에 CSS 구배를 추가 한

그라디언트 만 나타나는 이상한 라인이있을 나타납니다. 이 문제를 해결할 수있는 방법이 있습니까?

CSS의 :

#view-content .billing-form #submit { 
    background: #94c723; /* Old browsers */ 
    background: -moz-linear-gradient(top, #94c723 0%, #6cb119 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#94c723), color-stop(100%,#6cb119)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #94c723 0%,#6cb119 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #94c723 0%,#6cb119 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #94c723 0%,#6cb119 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #94c723 0%,#6cb119 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#94c723', endColorstr='#6cb119',GradientType=0); /* IE6-9 */ 
    border: none; 
    border-top: 1px solid #a1d61a; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    color: #FFFFFF; 
    font-size: 18px; 
    line-height: 40px; 
    padding: 0 70px; 
    font-weight: bold; 
    font-family: Arial, sans-serif; 
}

출처

2013-04-28 Alex Jeffrey

[fiddle] (http://jsfiddle.net/z8D9A/)와 함께 Safari 버전 5.1.2 (6534.52.7) , 그리고 문제 없음. 해당 HTML 코드도 제공 할 수 있습니까? – Bigood

html은 단지 입력 유형입니다. = submit. 또한, 이것이 최신 Safari (6?)에 영향을 미친다고 생각합니다. –

Safari의 내 버전을 업데이트하고 있습니다. Safari의 HTML/CSS 검사기로 제출 버튼에 적용된 모든 규칙을 확인하십시오 – Bigood

그냥 생각하지만, 왜 pixlr에 gradiant 오버레이를 만들고 단지 배경 이미지로 설정되지 않았습니다. 그러면이 문제가 더 이상 발생하지 않으며 약 10 줄의 코드를 저장할 수 있습니다.

출처

2013-06-19 17:27:17

이것이 제가 끝까지 간 접근법입니다. –

이 시도 :

#view-content .billing-form #submit { 
    background: #94c723; /* Old browsers */ 
    background: -moz-linear-gradient(top, #94c723 0%, #6cb119 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#94c723), color-stop(100%,#6cb119)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #94c723 0%,#6cb119 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #94c723 0%,#6cb119 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #94c723 0%,#6cb119 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #94c723 0%,#6cb119 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#94c723', endColorstr='#6cb119',GradientType=0); /* IE6-9 */ 
    border: none; 
    border-top: 1px solid #a1d61a; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    color: #FFFFFF; 
    font-size: 18px; 
    line-height: 40px; 
    padding: 0 70px; 
    font-weight: bold; 
    font-family: Arial, sans-serif; 
    display: block; 
    outline: none; 
}

출처

2013-05-02 20:29:17 Rob1n

불행히도이 문제를 해결하지 못했습니다 - 답변 주셔서 감사합니다 –

답변

관련 문제