IE7 CSS 너비 : 100 % 문제

응답 성있는 % 기반 그리드를위한 CSS 템플릿을 작성 중입니다. 나는 이전에 IE7과 일하고 있었고 어리석은 짓을 한 것 같았습니다. 그리고 지금은 효과가 없습니다.IE7 CSS 너비 : 100 % 문제

열이 %의 기반 : 그것은 현재 작동 방법

. 따라서 1/3 너비 열 (.col-1-3)은 width:32% + margin-left:1% + padding:1%이됩니다. 이것은 Chris Coyier의 Don't Overthink It Grids을 기반으로합니다.

최신 브라우저에서는 패딩이 div 너비에 영향을주지 않습니다. 그러나 IE7에서는 그렇습니다. 그래서 IE 클래스 (.lt-ie8)는 1 %의 패딩을 수용합니다. .lt-ie8 .col-1-3 { width: 30%; }. 그래서 30 % 너비 + 1 % margin-left + 2 % padding left/right * 3 - 1 % : first child = 100 %. 권리? IE7에서 왜 작동하지 않습니까?

솔루션 : 나는 behavior: url(/scripts/boxsizing.htc)를 사용하지만이없는이 가능한 수 있도록 노력하겠습니다 수

또는 JS를 사용하여 너비를 계산 한 다음 1 픽셀을 뺍니다. 나는 그것이 효과가있을 것이라고 생각하지만, 이상적이지는 않습니다.

또는 99 % 너비로 해결하십시오. 또한 이상적이지 않습니다.

나는 CSS 전용 솔루션을 좋아할 것입니다. 이견있는 사람?

출처

2013-01-18 dmathisen

누군가가 실제로 자신의 질문을 철저하게 조사했는지 알면 기쁘다. – Charles

문제의 일부가 반올림 오류 일 수 있습니다. 이 때문에 일반적으로 너비/패딩/여백을 혼합 할 때는 비율 기반 크기 조정, 특히 *를 사용하지 않는 것이 좋습니다. –

@CharlesTian 저는 몇 시간 동안 해답을 찾고있었습니다 ... 그것이 나를 여기로 데려왔습니다. – dmathisen

나는 이것을 테스트하지 않았지만 한 div를 다른 div에 넣고 내부 div에 여백 또는 여백을 넣을 수는 있을까요? 다음과 같이 입력하십시오 :

<div style="width:33%;padding:0;margin:0;"> 
<div style="padding:3%;margin:3%;"> 
Content here 
</div> 
</div>

다시 시도 할 수는 있지만 그럴만 한 가치는 있습니다.

출처

2013-01-18 19:27:48 Charles

Charles에게 감사드립니다. 나는 이것이 효과가있을 것이라고 생각하지만 여분의 마크 업을 생성하지 않기를 희망한다. 아마도 존재하지 않는 해결책을 찾고 있습니다. 어쩌면 나는 너무 까다 롭습니다 :) – dmathisen

CSS 스타일링을위한 크로스 브라우저 호환성은 때로는 때로는 고통 스러울 수 있습니다. 당신 말이 맞아, 이것은 여분의 마크 업을 많이 만들 것이다. 완벽한 해결책이 있다면, 당신이 그것을 찾을 수 있기를 바랍니다. 행운을 빕니다! – Charles

:) prob not (friggin 'IE)입니다. 고맙습니다. – dmathisen

IE7 CSS 너비 : 100 % 문제

답변

관련 문제