Процент CSS с десятичными знаками, только корректно работающий в Chrome (Firefox и Opera только округляются)

Question

У меня проблема с применением CSS Width с процентом и десятичной дробью (например, 33,33) к делению.

Кажется, что он отлично работает в Chrome, но воспроизводится в Opera и Firefox.

http://jsfiddle.net/nhkz9/1/

Opera и Firefox просто округляют процент вверх, и из-за недостаточного width в контейнере третий div перемещается на новую строку. Но когда проценты не округляются, для всех трех достаточно места, чтобы поместиться в одну строку.

есть идеи, как мне решить эту проблему?

спасибо

Answer 1

Размещенная вами демонстрация добавляет границу 1px к двум <div> s.По умолчанию это не учитывается в расчете 33,33%, поэтому ваши <div> s никогда не подойдут.Чтобы изменить это, используйте box-sizing: border-box;.

Answer 2

Попробуйте использовать

{max-width: 33.334%; min-width: 33.333%;} вместо {width: 33.333%}

Для всех браузеров это будет:

.class {max-width: 33.334%; min-width: 33.333%; *width: 33.333%;}

Это не идеально. +-1px все еще остается в некоторых браузерах, но ... это лучше, чем 1%