0

Правим размеры элементов средствами для разработчика

В процессе дебага верстки наткнулся на классную фичу в браузерных средствах для разработчика. В них всех есть вкладка, показывающая выбранный элемент и его размеры и отступы. В Firebug и IE Developer Tools это вкладка Layout, в Safari и Chrome Web Inspector’е — вкладка Metrics, в Opera Dragonfly — Разметка (в русской версии).

Так вот оказывается Firebug, IE Developer Tools и Web Inspector не только показывают метрики выбранного элемента, но и позволяют править! А Firebug-умничка еще и умеет это делать стрелочками вверх-вниз. В IE и FF достаточно просто кликнуть на размер, в Web Inspector кликнуть дважды. Ну а в Dragonfly можно кликать бесконечно :) Не поможет — править метрики там нельзя. Или я просто не разобрался как. Буду рад, если подскажете.

В IE новые размеры нужно обязательно вводить с размерами, иначе они сбрасываются в ноль. В остальных средствах для разработчика, если вводить цифры без размера, то по умолчанию считается, что размер указан в пикселах. Если же указывать с размерами, то все ведут себя по разному. Firebug не позволяет указывать единицы измерения. Web Inspector всё переводит в пикселы. IE Dev Tools, как уже было указано выше, вообще без единиц размеры не принимает, показывает в тех единицах, которые были указаны, пересчитывает в пиксели только ширину и высоту элемента.

Точно также все ведут себя и с размерами, указаными через стили. То есть все (в том числе Opera Dragonfly) показывают размеры в пикселах, а IE — в указанных единицах (кроме ширины и высоты).

Leave a Reply

Copyright © 2017 — dec5e | Site design by Trevor Fitzgerald