3 열 CSS - 중간 열이 IE7에서 떨어집니다.

CSS에서 직선 3 열로 보이는 문제가 있습니다. IE8에서 잘 작동하지만 IE7에서는 가운데 열이 왼쪽 및 오른쪽 열 아래로 떨어집니다. 나는 구글과 여기 stackoverflow에서 솔루션을 찾았지만 아무리 노력해도 아무 것도하지 않거나 IE8 이후에 나옵니다. 나 자신이 프로그래밍을 이해하지 못해 그 원인이 가장 정직합니다. 사전3 열 CSS - 중간 열이 IE7에서 떨어집니다.

CSS 코드

.wrap { 
margin:0 auto; 
width:850px; 
} 

#proleft { 
float: left; 
width: 245px; 
padding-right:10px; 
border-right-style:solid; 
border-width:1px; 
border-color:#dddddd; 
} 

#procontent { 
padding: 0 250px 0px 235px; 
margin-left:40px; 
margin-right:40px; 
} 

#proright { 
padding-left: 10px; 
float: right; 
width: 250px; 
border-left-style:solid; 
border-width:1px; 
border-color:#dddddd; 
} 

.clear { 
clear: both; 
}

나는 이런 식으로 할 것

<div class="wrap"> 

<div id="proleft"> 
CONTENT 
</div> 

<div id="proright"> 
CONTENT 
</div> 

<div id="procontent"> 
CONTENT 
</div> 

<div class="clear"></div>   

</div>

출처

2013-02-14 user1796216

는 가운데 열은 IE7에서 단순히 너무 큰이라면 작은 비트 (폭이 많다는가) 볼을 시도 해 봤나 CSS? 너무 크지 않도록하기 위해 IE7 전용 스타일이 필요할 수도 있습니다. –

패딩은 너비의 합계입니다. 안쪽 여백이 10px 인 열 250px 너비는 260px로 렌더링됩니다. 패딩과 여백을 더한 열 합계가 컨테이너보다 큽니다 – Ateszki

얼마나 당황 스럽습니까, Ateszki/James는 절대적으로 옳습니다. 나는 그것을 보지 못했다. 나는 그 숫자를 낮추었고 그 숫자는 낮췄다. ive가 몇 시간 동안 그 코드를보고 있었기 때문에 감사합니다! – user1796216

html로에서

감사 http://tinkerbin.com/cZNxkKK8

CSS

.wrap { 
margin:0 auto; 
width:850px; 
} 

#proleft { 
float: left; 
width: 250px; 
padding: 0; 
border-right-style:solid; 
border-width:1px; 
border-color:#dddddd; 
} 

#procontent { 
float: left; 
padding: 0 40px; 
} 

#proright { 
padding: 0; 
float: right; 
width: 250px; 
border-left-style:solid; 
border-width:1px; 
border-color:#dddddd; 
} 

.clear { 
clear: both; 
}

HTML

<div class="wrap"> 

<div id="proleft"> 
CONTENT 
</div> 

<div id="procontent"> 
CONTENT 
</div> 

<div id="proright"> 
CONTENT 
</div> 

<div class="clear"></div>   

</div>

출처

2013-02-14 15:41:27 Ateszki

그것은 정확하게 답변에 대한 해결책이 아니다. 그러나이 코드는 필요한 결과를 얻습니다.

http://jsfiddle.net/mXnS5/

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Hey</title> 
</head> 
<body> 
    <div id="wrap"> 
     <div id="proleft"> 

     </div> 

     <div id="proright"> 

     </div> 
     <div id="procontent"> 

     </div> 
    </div> 
</body> 
</html>

#wrap { 
margin:0 auto; 
width:850px; 
} 

#wrap > div { 
height:300px; 
} 

#proleft { float:left; width:245px; background-color:#CCC; } 
#proright { float:right; width:245px; background-color:#DDD;} 
#procontent { margin-left:245px; margin-right:245px; background-color:#EEE;}

출처

2013-02-14 16:02:50

3 열 CSS - 중간 열이 IE7에서 떨어집니다.

답변

관련 문제