IE9는 부동 요소와 함께 너비를 올바르게 계산하지 않습니다.

말처럼 100px 너비의 div 컨테이너를 만들고 div 요소 2 개를 왼쪽과 오른쪽으로 나누고 2px 너비의 46px 각각은 부모 컨테이너의 전체 너비를 덮고 같은 줄에 나란히 그려 져야합니다. 이것은 파이어 폭스와 크롬에서 발생하지만 IE9는 그것들을 별도의 줄에 그리고 다른 브라우저에서와 같은 효과를 내기 위해 부모 요소에서 너비를 102px로 지정해야합니다. 왜 그럴까요? 개인적으로IE9는 부동 요소와 함께 너비를 올바르게 계산하지 않습니다.

<html> 

<head> 

<style> 

div { 
margin:0; 
padding:0; 
} 

</style> 

</head> 

<body> 

<div style="border: 5px solid;width:100px;height:100px"> 

<div style='border:2px solid green;width:46px;height:46px;float:left'></div> 

<div style='border:2px solid 
green;width:46px;height:46px;float:right'></div> 
<div> 

</body> 

</html>

출처

2012-04-06 Bat0u89

약간의 코드를 추가하면 어쩌면 우리가 도울 수있다. 귀하가 언급 한 바에 의하면 귀하의 주요 div 내의 떠 다니는 요소가 넘쳐서 div가 포함되지 않은 이유를 알 수 있습니다. – breezy

두 개의 56px 너비 div가 100px div 부모에서 나란히 놓여있는 것을 볼 수 없습니다 ... – mddw

죄송합니다. 수정했습니다 ... – Bat0u89

확인 문제 해결 방법을 찾았습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

때문에 즉, 상자 모델 버그이 동작은 작은 요소 초래으로 http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug 이 될 것 같지 않습니다 당신이해야 할 무엇

는 DOCTYPE 선언의 예를 추가 할 필요가있다 ... 나는 정말로 혼란 스럽다. ...

출처

2012-04-07 19:15:32 Bat0u89

, 나는 차라리 많은 주위 수레보다 display: inline-block을 사용하십시오 :

여기에 코드입니다.

어쨌든, 가장 큰 원인은 두 개의 <div> 요소 사이의 빈 공백입니다. 그것은 두 번째 것을 아래로 이동시킬 수 있습니다. 제거해보십시오 (예 : <div...>...</div><div...>...</div>)

출처

2012-04-07 11:48:04

모든 수레는 블록 요소이므로 모든 공백은 공백에 영향을받지 않습니다. 그럼에도 불구하고 모든 공백을 제거했지만 여전히 같은 문제에 직면 해 있습니다. – Bat0u89

IE9는 부동 요소와 함께 너비를 올바르게 계산하지 않습니다.

답변

관련 문제