Прежде чем углубиться в предложенное ниже решение, я хотел бы указать на некоторые вещи в вашем CSS, которые можно немного исправить ...
div.prodDetail span.column {
width: 12.5%;
display: inline-block;
margin: 5px auto; /* shorthand: top/bottom, right/left */
padding: 0; /* shorthand: top/right/bottom/left */
height: 14px;
text-align: center;
}
div.prodDetail span.columnHist {
width: 14.3%;
display: inline-block;
margin: 0 auto; /* shorthand: top/bottom, right/left */
padding: 8px 0 6px; /* shorthand: top, right/left, bottom */
height: 12px;
text-align: center;
}
- переместил нулевое поле в
span.columnHist. - переместил заполнение нулями в
span.column. - , где это возможно, преобразуется в сокращение.
Я не верю, что это что-то решает, но улучшаетудобочитаемость, и это более логично, так как отступы и поля теперь объединены в каждом из этих двух классов столбцов, а не разделены между двумя классами.
В первом разделе таблицы у вас есть 8 столбцов, равномерно разделенных, что даету вас 12,5% каждый, который вы использовали здесь ...
div.prodDetail span.column {
width: 12.5%;
}
Во втором разделе вашей таблицы у вас есть 7 столбцов, равномерно разделенных, что дает вам 14,2857% каждый, и вы округлили его до 14,3% здесь...
div.prodDetail span.columnHist {
width: 14.3%;
}
Обратите внимание, что у вас есть проблема только с переносом раздела в новую строку.
Обратите внимание: каждый браузер будет выполнять свои расчеты макета по-своему.
- разные правила, когда / как округлять вычисления
- разные правила, когда / как округлять дробные проценты
- разные правила, когда / как округлять дробные пиксели
- и правила, когда / как рассчитывать ширину родительских и отдельных дочерних элементов
Я предполагаю, что вы используете проценты, потому что вы хотите плавный макет.
Примеры, предполагающиеширина контейнера 901 пикселей:
Сценарий 1: 14,3% x 901 = 128,843 (пикселей на столбец)
Предположим, что случайный браузер округляет финалзначение вверх ...
129 x 7 столбцов = 903 пикселя в ширину
Даже если браузер не округляет до конца ...
128,843 x 7 столбцов =901,901 => 902 пикселя в ширину
Оба шире, чем ваш контейнер, и вы получите переход к следующей строке.
Сценарий 2: 14,3% x 7 столбцов= 100,1% = 901,90 => 902 пикселя в ширину
Вы определили общую ширину шириныможет вместить более 100% контейнера, и это тоже создаст обертку.Один браузер может округлить общий процент, и вы в порядке.Другой может воспринимать это буквально и вместо этого округлять общее значение пикселя.
Браузеры могут сначала смотреть на общую ширину и строить столбцы таблицы вторыми или, может быть, наоборот.
Точкато есть, используя десятичные дроби таким точным образом, вы заставляете браузер выполнять математические преобразования, которые могут вносить некоторые сложные математические ошибки округления.
Предлагаемые обходные пути:
, если ваша таблица имеет фиксированную ширину, а затем определите ширину столбца как значение целого пикселя.
или используйте в процентах меньше суммы, которую вы изначально рассчитали.Что-то вроде 14,2% вместо этого.Лично я бы проигнорировал это и просто справился бы с любым оставшимся пробелом.
Что касается общей ширины таблицы, вы не показали никакого кода для ееродительский элемент, поэтому невозможно сказать, как определяется его общая ширина.Возможно, решение проблемы, описанной выше, также поможет решить проблему ширины.