선형 그라디언트 유물

나는 모질라 파이어 폭스 나쁜 일이 볼 수 screenshow 16. firefox linear-gradient artifact 선형 그라디언트 유물

선형 구배에 문제가 있습니다.

코드 :

<a href="#">Button Text</a>

그리고 CSS 부분 : 나는 스크린 샷에 라인 높이 속성을 변경 한

a { 
    background: -moz-linear-gradient(center top , #88EB52, #3CA82D); 
    border: 1px solid #399A29; 
    border-radius: 4px 4px 4px 4px; 
    color: #FFFFFF; 
    display: block; 
    float: left; 
    font-size: 16px; 
    font-weight: bold; 
    line-height: 54px; 
    margin-bottom: 20px; 
    margin-top: 20px; 
    text-align: center; 
    text-decoration: none; 
    width: 376px; 
}

누구나 그 줄을 어떻게 설명하고 숨길 수 있습니까?!

감사합니다. 미안해, 내 영어로.

출처

2012-11-01 Umnyjcom

당신은 바이올린을 만들 수 있습니까? 현재 스타일이 주어지기 때문에 나는 그런 것을 볼 수 없다. –

FF16에서 테스트되었으며 예상대로 작동합니다. 문제가 발생했을 때 선 높이 값을 제공하면 오류를 추적 할 수 있습니다. 나는 이것이 문제가 전혀 일어나지 않는다면 이것은 종횡비 때문이라고 생각합니다.

이 결함은 아니지만, 일관성 그라데이션 라인 비율 또는 값을 사용하려고 :

여기

background: -moz-linear-gradient(center top, #88EB52 0%, #223312 100%);

는 작업 바이올린입니다 : http://jsfiddle.net/FVcdu/1/

출처

2012-11-01 07:45:45

고마워! 나는이 요소를 제외하고 다른 요소를 체크해 봤는데 잘 작동한다. 나는 다른 요소에서 문제를 찾기 시작했고 나는 그것을했다. 문제는 링크 위 div 요소에서 "line-height : 1"입니다. – Umnyjcom

나는 파이어 폭스에서이 이상한 버그를 우연히 발견했다. 그것은 시간이 좀 걸렸지 만, 나는 그것을 CSS에서 누락 된 선언으로 좁혔다.

그래디언트를 수행 할 때는 모든 브라우저에서 그래디언트가 가능한 한 좋아 보이도록 모든 다른 브라우저 표준을 시도해야합니다. 나는 가능한 모든 브라우저에 대한 CSS 해독을 제공 할 Ultimate CSS Gradient Generator을 사용하도록 권장 할 수 있습니다.

나 누락 한 선언, 그것은 결국 그것을 해결 W3C 규격이었다 linnear 구배()을.

background: linear-gradient(to bottom, #CCCCCC 0%,#EEEEEE 100%);

그래서 나를 위해 그렇게했던 것처럼 코드에서 가능한 한 당신의 그라데이션에 바닥 x 1 픽셀 라인 문제를 해결할 수 있다고 덧붙였다.

궁극적 인 CSS 그라데이션 생성기 : http://www.colorzilla.com/gradient-editor/

출처

2012-11-07 15:50:04 Donpa

선형 그라디언트 유물

답변

관련 문제