Safari에서 CSS가 작동하지 않습니다. - Chrome, Firefox에서 OK를 누릅니다.

Question

내 웹 사이트는 http://proustscookies.blogspot.com/입니다. CSS를 사용하여 검색 양식에 첨부 된 단추의 스타일을 지정하고 있습니다.

input.gsc-search-button { 
margin-left: 10px; 
height: 24px; 
width: 60px; 
border-style: none; 
background-color: #666666; 
font-family: Helvetica, Arial, sans-serif; 
font-size: 13px; 
color: #FFFFFF; 
} 

여백 왼쪽 명령을하지만 전혀 사파리, 파이어 폭스와 크롬에서 큰 노력하고 있습니다 : 여기

는 CSS입니다.

다른 모든 CSS 규칙 (위와 사이트 전체에서 데이터가 표시되지 않음)은 세 브라우저에서 모두 작동합니다 (그리고 IE에서 마지막으로 확인한 경우).

크롬 확장 스타일 봇을 사용하여 개체 이름 (input.gsc-search-button)을 찾았습니다. 불행하게도 나는 어디에서나 기본 HTML을 찾을 수 없다. (블로거 스폰서 위젯이다. 구글이 코드를 숨길 수 있을까? 모르겠다.)

왜 마진이 왜 ' Safari에서 보여주는 방법, 또는 검색 상자에 HTML을 찾는 방법을 알려 주시면 감사하겠습니다.

Answer 1

Google에 의해 재정의되었습니다. 당신이 할 경우

margin-left: 10px!important; 

당신은 그것을 대체 할 수 있습니다.

또는 당신은 당신의 선택은보다 구체적인 만들기 (따라서 그에게 우선 순위를 부여)

td.gsc-search-button input.gsc-search-button { 
    margin-left: 10px; 
} 

힌트 같은 작업을 수행하여 수 : 바로 (파이어 폭스 나 크롬에서) 요소에 클릭하고 요소 검사 "를 클릭 "그 요소와 관련된 CSS를 볼 수 있습니다.

Answer 2

모바일 사파리를 제외하고 모든 스타일이 올바르게 적용된 비슷한 문제가있었습니다. 매우 이상합니다. 심지어 데스크톱 사파리에서도 작동했습니다!

결국보다 정확한 타겟팅으로 수정했습니다. 나는 전에 이것을 가지고 있었다 :

.phone{ 
    background-color:gray; 
} 

이 변경은 그것을 고쳤다.

div.phone { 
    background-color:gray; 
    } 

그런데 모바일 사파리의 검사기를 사용하여 알아 냈습니다. http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787