CSS3 버튼은 웹과 IOS에서 다르게 렌더링됩니다.

내 사이트에서 사용하는 CSS3 버튼을 생성하는 코드를 발견했습니다. 브라우저에서 볼 때 버튼이 멋지게 보입니다. 그러나 내 사이트의 모바일 웹 버전 (동일한 스타일을 사용함)에서는 버튼이 다르게 렌더링됩니다. 내가 낯선 사람이라도 Safari를 사용하고 iPhone의 사용자 에이전트로 내 사이트를 볼 경우 버튼이 제대로 보이는지 확인하십시오. 그러나 iOS 시뮬레이터에서는 그렇지 않습니다. 누군가 제가 왜 이해하는지 도울 수 있습니까? 이 아이폰에 렌더링하는 방법을CSS3 버튼은 웹과 IOS에서 다르게 렌더링됩니다.

enter image description here

을 그리고 여기에 있습니다 : : 그것은 브라우저에서 렌더링하는 방법

.button, #button .button, li.button .button { 
    display: inline-block; 
    zoom: 1; 
    *display: inline; 
    vertical-align: baseline; 
    outline: none; 
    cursor: pointer; 
    text-align: center; 
    text-decoration: none; 
    font: 14px/100% Arial, Helvetica, sans-serif; 
    padding: .5em 1.5em .55em; 
    text-shadow: 0 1px 1px rgba(0,0,0,.3); 
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em; 
    border-radius: .5em; 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    box-shadow: 0 1px 2px rgba(0,0,0,.2); 
} 

.orange, #button .orange { 
    color: #fef4e9; 
    border: solid 1px #da7c0c; 
    background: #f78d1d; 
    background: -webkit-gradient(linear, left, top, left bottom, from(#faa51a), to(#f47a20)); 
    background: -moz-linear-gradient(top, #faa51a, #f47a20); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); 
}

은 다음과 같습니다

내가 사용하고 코드의

enter image description here

출처

2012-03-02 tvalent2

나는 실수를했습니다. -webkit-gradient에 대한 구문이 잘못되었습니다. 대신에 :

-webkit-gradient(linear, left, top, left bottom, from(#faa51a), to(#f47a20));

그건 ...

-webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));

나는이되지 말았어야 왼쪽 상단 사이에 쉼표를했다.

출처

2012-03-03 01:02:09 tvalent2

당신의 배경 이미지 (발전기는 here 찾을 수 있습니다)로 SVG를 사용하여 ried?

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5MDQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZBQTUxQSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0Y0N0EyMCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzkwNCkiIC8+Cjwvc3ZnPg==);

이 IE9, 크롬, 사파리와 오페라와 호환 : 사용이 내가 (jsFiddle 링크 here를) 주위에 거짓말을 한 아이폰 3G에서 일했다. IE7/8에서는 작동하지 않습니다. IE 스타일 시트를 사용하거나 .orange 클래스 명령어를 추가하여 IE7 또는 IE8 이하에 스타일을 적용하는 것이 좋습니다. here에 대한 자세한 정보.

출처

2012-03-02 13:53:25 Mathachew

감사합니다. 나는 그것을 줄 것이다. 그러나 그것이 작동하지 않는 이유가 무엇인가? – tvalent2

죄송합니다, 이유를 모르겠습니다. iOS 노출이 제한되어 있습니다.아마도'-webkit-gradient'는 지원되지 않지만'linear-gradient' 나'-webkit-linear-gradient'와 같은 것이 있습니다. [이 CSS 그래디언트 생성기] (http://gradients.glrzad.com/)도 관심이 있을지 모르겠지만 Microsoft의 SVG를 사용하면 대부분의 최신 브라우저에서 한 정의가 작동하므로 편리합니다. – Mathachew

Gotcha, 도와 줘서 고마워! – tvalent2

"-webkit-appearance : none;"을 CSS 속성에 입력하고 "input [type = submit], 입력 [type = Reset] {-webkit-appearance : none;}"을 추가하십시오.

출처

2012-03-03 07:18:35 Shakti

Shakti가 말한 것처럼 버튼에 다음 CSS를 추가해야합니다.

-webkit-appearance: none;

이

이 질문에 더 설명 :

'CSS submit button weird rendering on iPad/iPhone을'

당신이 단순한 배경 색상을 제공하는 경우 iOS에서 버튼이 아이폰 OS가 모양을 둥글게 기본이 보인다 :

background: orange

그래디언트를 제공하면 사용자 정의 스타일을 사용하기 위해 appearance CSS 속성을 효과적으로 무시합니다.

하지만 잘못된 구문을 사용했기 때문에 iOS 모양을 제공하고있었습니다.

출처

2014-07-01 00:06:15

CSS3 버튼은 웹과 IOS에서 다르게 렌더링됩니다.

답변

관련 문제