Webkit (Safari/Chrome)은 부동 요소에서 백분율로 여백을 렌더링합니다.

Question

두 개의 컨테이너가 부동 상태이고 상위 요소의 너비를 100 % 차지해야합니다.

<div class="box">1</div> 
<div class="box half">2</div> 
<div class="box half">2</div> 

그리고이 CSS :

나는이 HTML이이 잘 작동 파이어 폭스에서

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing:border-box; 
} 

body, html { 
    margin: 0; 
    padding: 0;  
} 

body { 
    width: 420px; 
    margin: 0 auto; 
} 

.box { 
    float: left;  
    width: 100%; 
    margin: 0; 
    border: 1px solid red; 
} 

.box.half { 
    width: 49.2%; 
    margin-right: 1.6%; 
} 

.box.half + .box.half { 
    margin-right: 0; 
} 

을하지만, 크롬과 사파리 엉망 그것을. 그것은 일부 화면 크기 (결과 크기가 정수일 때처럼 보입니다)에서 작동하지만 모두에 대해서는 작동하지 않습니다. 이 문제를 해결하기 위해 할 수있는 일이 있습니까?

이 fiddle에서 보라.

Answer 1

Chrome 및 Firefox에서 아무 문제없이 확인했지만 사파리 (mac)에서 찾았습니다.

이전에는 그 사실을 알지 못했습니다. 내 솔루션 오른쪽 상자를 오른쪽으로 떠올리게 만드는 것입니다.

.box.half + .box.half { 
    margin-right: 0; 
    float:right; 
}