Проблема с коробкой-размерной рамкой и минимальной шириной в IE 9

Я использую модель box-size: border-box. Когда элемент встроенный блок с минимальной шириной содержится в элементе встроенного блока (контейнер), контейнер слишком широк в Internet Explorer 9. Работает как ожидается в FF 10.0, Chrome 17.0, Opera 11.5 и Safari 5.1.2.

Посмотрите этот jsfiddle

Кстати, ширина вместо min-width работает как шарм.

Любые идеи?

Ответ 1

Привет, я столкнулся с вашим сообщением, когда Googling для аналогичной проблемы с IE 8, хотя IE 8 поддерживает размер окна и минимальную высоту/ширину, из моих тестов кажется, что IE 8 игнорирует пограничный поле при использовании min-height/ширина на одном и том же элементе

например.

#box {
   min-height: 20px;
   padding:4px;
   box-sizing:border-box;
}

Высота IE 8= 28px, Высота Chrome 20= 20px;

Решение с использованием селекторов браузера css http://rafael.adm.br/css_browser_selector/

#box {
       min-height: 20px;
       padding:4px;
       box-sizing:border-box;
  }

 .ie8 #box, .ie9 #box {
       min-height: 12px;
       padding:4px;

 }

Ответ 2

Мой вопрос

Я вижу значение border-box, которое применяется в инспекторе инструментов разработчика IE8. Поэтому я знаю, что пограничная рамка работает, особенно, как ожидается, когда установлена ширина (или высота). Но поскольку я использую min-height для моего роста (и OP использует min-width), мое значение min не работает. Поэтому проблема заключается в следующем:

IE min-height/min-width не влияет на border-box

.box {
     padding: 30px;
     box-sizing: border-box;
     min-height: 200px;
}    

<div class="box">Awesome Box</div>

IE8: 260px (30px от верхнего слоя и 30px от нижней части). Не работает.
FireFox: высота 200px. (минимальный коэффициент в рамке). Работы.

Мое решение:

Не помещайте прописку на тот же элемент, что и минимальные значения и рамка - (вам может не понадобиться размер рамки без полей, если вы их отделите).

.box {
     box-sizing: border-box;
     min-height: 200px;
}
.box-inner {
     padding: 30px;
}  

<div class="box">
    <div class="box-inner">Awesome Box</div>
</div>

Ответ 3

У меня нет решения для этого, но натолкнулся на этот вопрос, в то время как сам по себе искал исправление. К счастью, в моем случае я могу обойтись сейчас, установив ширину вместо min-width, хотя это может быть проблемой в будущем.

В любом случае, я просто хотел добавить, что та же проблема существует, если элемент min-width и его контейнер также плавают вместо встроенного блока.

Здесь обновление оригинальной скрипты, показывающее ее с помощью float: left: http://jsfiddle.net/5Ng7k/24/