ie8 - 너비가 최대 너비 인 경우 너비가 100 %가됩니다.

최대 너비와 너비가 100 % 인 조합으로 반응하는 상자를 만들려고합니다.ie8 - 너비가 최대 너비 인 경우 너비가 100 %가됩니다.

상자의 너비는 max-width로 설정되지만 부모 컨테이너가 너무 작아지면 오버플로가 아닌 축소됩니다.

ie9 및 ff/chrome에서 작동하지만 ie8 표준 모드에서는 패딩이 최대 너비에 추가되는 것 같습니다.

예 :

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
</head> 
<body> 
    <style> 
     #test 
     { 
      border: 1px blue solid; 
      width: 100%; 
      max-width: 210px; 
      display: block; 
      height: 30px; 
      -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      box-sizing: border-box; 
     } 
    </style> 


    <span id="test"></span> 
</body>

이 IE9, 파이어 폭스, 크롬에 폭 최대 210px있는 상자에 발생합니다. 그러나 ie8에서는 경계가 추가되어 maxwidth가 212px가됩니다. 경계선을 제거하면 다시 ie8에서 210px가됩니다.

나는 상자 크기를 내용 상자로 변경하는 것이 도움이 될 것이라고 생각했지만 상자 크기가 어떤 차이가없는 것 같았습니다.

출처

2013-06-25 muzzamo

IE8의 상자 크기 구현의 버그라고 생각합니다. IE 개발 도구의 레이아웃 탭을 확인하면 내용 상자 너비가 올바르지 않은 것을 알 수 있습니다. – marcvangend

'min-width'와'max-width'는'box-sizing : border-box;와 호환되지 않습니다. '는 IE8과 Firefox 16 & 이하의 알려진 버그입니다. http://stackoverflow.com/questions/9508262/min-height-min-width-doesnt-respect-box-sizing-in-some-browsers –

는 인터넷 익스플로러 문제를 해결하기 위해 이러한 링크를 시도하십시오 :

(다운로드 respond.min.js) https://github.com/scottjehl/Respond

(다운로드 CSS3 - mediaqueries.js) https://code.google.com/p/css3-mediaqueries-js/

가이 추가 당신 <head> 태그를 다운로드 한 후 :

<script type="text/javascript" src="respond.min.js"></script>

전체 상자를 반응 적으로 만들려면 max-width를 100 %로 설정하십시오. 상자의 실제 너비를 변경하려면 원하는 너비로 일반 너비를 유지하면서 최대 너비를 100 %로 유지해야합니다.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
</head> 
<body> 
    <style> 
     #test 
     { 
      border: 1px blue solid; 
      width: 100%; 
      max-width: 100%; 
      display: block; 
      height: 30px; 
      -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      box-sizing: border-box; 
     } 
    </style> 


    <span id="test"></span> 
</body>

출처

2013-06-25 12:28:35 user2518163

'min-width' &'max-width'는' 상자 크기 : border-box;는 IE8 및 Firefox 16 이하의 알려진 버그입니다. http://stackoverflow.com/questions/9508262/min-height-min-width-doesnt-respect-box-sizing-in-some-browsers를 참조하십시오. –

ie8 - 너비가 최대 너비 인 경우 너비가 100 %가됩니다.

답변

관련 문제