사파리와 비교했을 때 Chrome 브라우저가 다르게 렌더링 됨

이것은 내 코드입니다. [매우 간단한 코드이지만 깨뜨릴 수 없습니다.] 아주 많이 새롭습니다. 항상 고정 너비를 사용했기 때문에 어떤 문제도 발생하지 않았습니다. 하지만 내 진짜 질문은 왜 다른 브라우저에 의해 점령 폭에 큰 차이가있다.사파리와 비교했을 때 Chrome 브라우저가 다르게 렌더링 됨

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Flip Transition</title> 
    <link rel="stylesheet" href="../css/reset.css"> 
    <link rel="stylesheet" href="../css/style1.css"> 
</head> 
<body> 
<ul> 

    <li> 
    <div class="front">1</div> 
    <div class="back"> 
    <img src="../images/100.jpg" alt="Image"> 
    </div> 
    </li> 

    <li> 
    <div class="front">2</div> 
    <div class="back"> 
    <img src="../images/100.jpg" alt="Image"> 
    </div> 
    </li> 

    <li> 
    <div class="front">3</div> 
    <div class="back"> 
    <img src="../images/100.jpg" alt="Image"> 
    </div> 
    </li> 

    <li> 
    <div class="front">4</div> 
    <div class="back"> 
    <img src="../images/100.jpg" alt="Image"> 
    </div> 
    </li> 

    <li> 
    <div class="front">5</div> 
    <div class="back"> 
    <img src="../images/100.jpg" alt="Image"> 
    </div> 
    </li> 

    <li> 
    <div class="front">6</div> 
    <div class="back"> 
    <img src="../images/100.jpg" alt="Image"> 
    </div> 
    </li> 

    <li> 
    <div class="front">7</div> 
    <div class="back"> 
    <img src="../images/100.jpg" alt="Image"> 
    </div> 
    </li> 

    <li> 
    <div class="front">8</div> 
    <div class="back"> 
    <img src="../images/100.jpg" alt="Image"> 
    </div> 
    </li> 

</ul> 

</body> 
</html>

은 사파리에서는 1280 * 0의 해상도를 사용하지만 크롬으로 만 1163.636 *의 0.Why 크롬 전체 width.And도 리셋 CSS를 사용하고 stylesheet.But 파이어 폭스에 문제가없는 사용하지 않는 사용합니다.

여기는 스타일 시트입니다. 내가 잘못 내가 뭐하는 거지 모르는

li{ 
    list-style-type: none; 
    float: left; 
    width: 200px; 
    height: 200px; 
    background: red; 
}

From Chrome Browser

From safari Browser

내가 주석 및 리셋 CSS 스타일 시트 함께 할 수있는 뭔가있다 시도했지만 같은 result.But 만 1147.642 폭을 사용합니다 사파리의 경우 크롬은 8 픽셀, 너비는 1264 픽셀, 여백은 8 픽셀입니다.

출처

2014-02-07 TryingToLearn

Safari와 Chrome에는 모든 요소의 너비/높이/여백/패딩 등에 대한 기본 설정이 있습니다. CSS 재설정은 모든 것을 표준으로 설정하는 파일이므로 모든 브라우저에서 동일합니다. 귀하의 예에서 나는 라고 생각하여 ul 또는 li 태그 또는 그와 비슷한 것을 덧붙입니다.

CSS 재설정을 다시 넣거나 http://necolas.github.io/normalize.css/과 같은 것을 사용할 수 있습니다. 이는 일반적으로 CSS 재설정에 대한 가장 현대적인 대안으로 받아 들여집니다.

출처

2014-02-20 12:59:06 discoliam

사파리와 비교했을 때 Chrome 브라우저가 다르게 렌더링 됨

답변

관련 문제