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

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

14 голосов
/ 23 февраля 2012

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

Смотрите это jsfiddle

Кстати, ширина вместо минимальная ширина работает как шарм.

Есть идеи?

Ответы [ 3 ]

13 голосов
/ 30 июля 2012

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

* 1003 Е.Г. * 

#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;

 }
1 голос
/ 09 января 2015

Мой выпуск

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

Минимальная высота / минимальная ширина IE не учитывает границы: 

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

<div class="box">Awesome Box</div>
  • IE8: 260px (30px от верха отступа и 30px от нижнего отступа). Не работает.
  • FireFox: высота 200 пикселей. (фактор мин в рамке). Работает.

Мое решение:

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

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

<div class="box">
    <div class="box-inner">Awesome Box</div>
</div>
0 голосов
/ 18 сентября 2013

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

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

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

...