Можете ли вы измерить границы css в% s?

Question

Я хочу, чтобы мои границы были процентами, потому что весь мой макет основан на процентах, и когда экран достаточно мал, одна часть плавает ниже, потому что границы слишком велики в px.

jsFiddle here

Answer 1

нет, вы не можете использовать проценты для ширины границы, по крайней мере, не надежно, как Пекка и Симе указывает.

Да, вы можете использовать процент для границы, но его крайне неортодоксальный, проблема, вероятно, в другом месте вашего макета.

Answer 2

Да, проверить спецификации: http://www.w3.org/TR/css3-background/#border-width

Значение% основана на ширины содержащего блок, если содержащий блок имеет режим горизонтального текста, в противном случае высоту.

Совместимость с браузером: Отсутствует.
Он не работает ни в одном из браузеров, которые у меня есть: IE9 beta, FF 4 beta 7, Opera 10,63, последние версии Chrome и Safari.

Answer 3

Если я прочитал спецификации прав, это valid in CSS 3:

Процентное соотношение: ширина * вмещать блок

Вроде бы недействительным в CSS 1 и 2.1:

Проценты: N/A

поэтому, я не верю, что он будет поддерживаться во всех браузерах прямо сейчас.

Answer 4

Это может быть действительным в CSS3, но не в CSS2.

модель коробки CSS2 говорит border width имеет length типа, а также:

Формат значения длины (обозначенной по <length> в данном описании) является <number> (с или без десятичной точки) за которым сразу следует идентификатор (например, px, em и т. д.). После нулевой длины идентификатор устройства необязательный.

Также обратите внимание, что percentages не то же самое и обсуждаются в следующем разделе.

Теперь браузеры, полностью поддерживающие CSS3, немногочисленны. Возможно, вы не захотите сильно полагаться на эту функцию.