Google에서 작업 포트폴리오를 만드는 프로젝트가 있습니다. 하지만 문제가 있습니다 :브라우저에서 사이트가 다르게 표시되고 있습니다.
my site을보고 표시되는 탭의 아래쪽에있는 "정보"링크를 누릅니다.
IE 및 Firefox보다 Chrome에서 다르게 작동합니다. IE와 Firefox에서는 탭 하단의 텍스트가 잘리지 않지만 Chrome에서는 보이지 않습니다.
3 개의 브라우저 모두에서 개발 도구를 사용하려고 시도했지만 문제를 찾으려고 시도했지만 시도 할 수 없습니다. 여러분 중 일부가 도움을 줄 수 있기를 바랍니다.
jsFiddle을 포함하지 않았습니다. 문제가있는 곳을 잘 모르겠습니다.
모든 브라우저가 동일한 렌더링 엔진을 사용하거나 동일한 규칙을 따르는 것은 아닙니다. 이것이 귀하의 경우 모두 다르게 보이는 이유입니다. 오페라 브라우저는 실제로 HTML 가이드 라인을 가장 잘 준수합니다. 불행히도 항상 렌더링은 모두 동일하지 않으며 개발자에게는 끊임없는 문제입니다. 브라우저가 더 엄격한 CSS 규칙을 더 잘 따르는 경향이 있으므로 최대한 엄격한 CSS를 사용합니다.
희망이 도움이되었습니다. 행운을 빕니다.
"* 오페라 브라우저는 실제로 HTML 가이드 라인을 가장 잘 준수합니다 *." 어떤 기준에 따르면? – Oriol
@Oriol W3C 표준에 따르면 Opera 브라우저가 가장 적합합니다. 그리고 그것은 정말로 downvote의 가치가 있었습니까? 롤 ... 만약에 무엇이라해도, 나는 나의 대답이 upvote를받을만한 가치가 있었다라고 생각한다. 나는 OP가 왜이 문제를 가지고 있는지에 대한 설명과 OP가 그의 문제를 해결할 수 있도록 조언을했다. – racecarjonathan
오페라 브라우저는 크롬에 따라 내 사이트를 어떻게 디자인해야 하는지를 보여줍니다. 정보 주셔서 감사합니다. – Subvenio
각 브라우저에는 약간 다른 네이티브 스타일 시스템이 있으므로주의해야합니다. 운영 체제의 테마를 기반으로 플랫폼에 기본 스타일을 사용하여 요소를 표시
-moz-외관 CSS 속성이 도마뱀 (파이어 폭스)에서 사용됩니다 예를 들어
는, 파이어 폭스는 "도마뱀"을 사용합니다.
Firefox는 Gecko를 사용하므로 Chrome은 Webkit을 사용하며 IE는 자체 시스템을 사용합니다. 각 하나는 약간 다르며 당신은 당신의 CSS에 그것을 설명해야합니다.
transition과 같이 좀 더 복잡한 CSS3 스타일을 구현하려고하면 일반 CSS를 사용하고 브라우저 별 CSS를 사용하려고합니다.
CSS 파일을 볼 수 없어서 CSS 파일에서 CSS 리셋 스타일을 사용했기 때문에이 작업을 수행했는지 확실하지 않습니다. 당신은 마진, 패딩, 테두리, 글꼴 크기, 글꼴,을 수직 정렬과 같은 모든 기본적인 규칙을 다시 설정하여이를 달성하고, 수 표시 0, 블록, 상속 같은 기본값으로, 및 100 %. * (별표)를 사용하여 모든 태그의 스타일을 지정하거나 쉼표로 개별적으로 구분하여 나열 할 수 있습니다. 이렇게하는 이유는 각 브라우저마다 기본적으로 자체 설정 스타일이 제공되기 때문입니다. 이는 자신의 스타일을 무시하고 사이트 내에서 원하지 않는 간섭을 유발할 수 있기 때문입니다. 이것은 좋은 습관입니다.
고마워,하지만 내 CSS 스타일 시트 위에 HTML 파일에 CSS 리셋을 포함 시켰습니다. 따라서 모든 값을 재설정해야합니다. – Subvenio
.target 클래스 위치 값을 변경하고 변경 사항을 확인해보십시오. 또한 각 여백 값을 추가하십시오. 무슨 일이 일어나고 있는지 당신의 꼬리말이 더 높은 Z- 색인을 가지고 당신의 몸을 덮어 버리고 싶어하는 것입니다.
그 점을 살펴 보겠습니다. 도움에 감사드립니다. – Subvenio
왜 downvotes?그 질문은 비록 큰 질문이지만 유효하지 않은 것은 무엇입니까? – Subvenio
참조 : [최소의 완전하고 검증 가능한 예제를 만드는 방법] (http://stackoverflow.com/help/mcve). – Oriol