Хром и размер коробки: рамка на дисплее: таблица

Я делаю небольшой макет с 2-мя панелями, используя display:table. Для интервала (также из фонового изображения) я использую padding. Поскольку мне нужны дети, чтобы иметь точный width:50% из доступного пространства (с учетом заполнения родителя div), я использую box-sizing:border-box.Хром и размер коробки: рамка на дисплее: таблица

Это прекрасно работает в Opera, но в Chrome box-sizing:border-box или даже -webkit-box-sizing:border-box молча игнорируется.

Я сделал демоверсию, которая показывает проблему. Две красные коробки должны быть квадратными и синяя коробка должна быть 200px по ширине и высоте: http://jsfiddle.net/fabb/JKECK/

Вот источник HTML:

<div id="table"> 
    <div id="left"> 
     Something on the left side 
    </div>  
    <div id="right"> 
     Something on the right side 
    </div> 
</div>

И CSS:

#table { 
    display: table; 
    /*border-collapse: collapse;*/ 

    width: 200px !important; 
    height: 200px !important; 
    box-sizing: border-box; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 

    margin: 0; 
    border: 1px solid blue; 
    padding: 60px 20px; 
} 

#table #left, #table #right { 
    display: table-cell; 

    width: 50%; 
    box-sizing: border-box; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 

    margin: 0; 
    border: 1px solid red; 
    padding: 0; 
}

Является ли это ошибка в Chrome? Или я делаю что-то неправильно?

источник

2012-01-04 fabb

Да, Google хром ошибка:

Issue #103543 - CSS display: table bug

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

Это проще и стабильнее, если использовать там float, если ширина и высота известны, и вы хотите квадратные ячейки.

Примечание: Поскольку структура таблицы имеют возможность разбить назначенную CSS width/height, то лучше не использовать его, если это не таблица, как структура, или вы хотите, чтобы содержание разверните контейнер - так что ваш !important в width & height не работает.

источник

2012-01-04 17:06:55 vincicat

Большое спасибо за вашу ** примечание ** - это помогло мне найти обходное решение. Я ** удалил ** display: table' из '# table', что делает мой макет работать в Chrome, Opera и Firefox. Есть два недостатка, которые, к счастью, не влияют на меня: 1) отдельные ячейки больше не охватывают всю высоту, и 2) никакой другой 'display: table *' не должен присутствовать там, где он мог бы помешать. У вас есть дополнительная информация **, почему ** элемент с 'display: table' может нарушать свойства' width' или 'height' (имела ли эта проблема в Opera при попытке другого обходного пути)? – fabb

«Ширина таблицы является гибкой», потому что это своего рода модель встроенного блока (историческая причина - может быть, люди предпочитают, что она может расширяться на основе контента), см. Ссылку на спецификацию [link] (http: // www .w3.org/TR/CSS2/tables.html # модель). Чтобы устранить эту проблему, вы можете попробовать «table-layout: fixed» [ссылка для большего решения] (http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/) – vincicat

p.s. если вы хотите, чтобы ячейка охватывала всю высоту, попробуйте flexbox: [обновленная версия webkit] (http://www.the-haystack.com/2012/01/04/learn-you-a-flexbox/) или [CSS3 flex box, поддерживаемая версия] (http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/) - – vincicat

Удалить -webkit- для браузера Chrome.

источник

2013-08-21 11:06:51

Хром и размер коробки: рамка на дисплее: таблица

ответ

Смежные вопросы