Форум

Nanto · #11 (**permalink**) 14.06.2013, 07:32

По сабжу (браузеры всё же уточняйте - ага? а то влом перебирать все чтобы багу воспроизвести) - для инпута проставьте корректное значение font-size и будет вам щастье.

Nanto · #12 (**permalink**) 14.06.2013, 07:35

Сообщение от danik.js

И как проценты паддинга помогут? Бордер то в процентах не задашь.
Решение - использовать box-sizing: border-box и никакие проценты не нужны.

А! Ну с таким подходом конечно... Типа если браузер не поддерживает какие-то фичи из CSS3 и HTML5 - пусть идёт в гуду?
я к тому, что "width:98%; padding:0 1%;", т.е. поля не задашь в пикселях при таком раскладе, а они нужны, иначе текст будет "липнуть" к краям.

danik.js · #13 (**permalink**) 14.06.2013, 07:53

Сообщение от Nanto

т.е. поля не задашь в пикселях при таком раскладе, а они нужны

Помимо полей нужен еще бордер. Его тоже не задашь в пикселях. Предлагаешь задать в процентах? Как ты себе результат представляешь?

Сообщение от Nanto

Типа если браузер не поддерживает какие-то фичи из CSS3 и HTML5 - пусть идёт в гуду?

Я не о "каких-то фичах" говорю, а о box-sizing. IE8 это свойство поддерживает (причем без префикса в отличие от Firefox), а этого достаточно в большинстве проектов. А если не достаточно - то ie-хаки в помощь (или conditional comments)

<style>
    input {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        border: 1px solid gray;
        padding: 4px;
        *width: 97%;
        *padding: 4px 1%;
    }
</style>
<input />

Nanto · #14 (**permalink**) 14.06.2013, 08:31

danik.js,
box-sizing распространение получил относительно недавно, поэтому есть куча кода который надо поддерживать, а не переписывать. В идеале-то, конечно, лучше использовать его (а ещё лучше без префиксов и оглядки на старых ослов). А с процентными бордерами, уже и не помню... как вариант обернуть дивкой с margin:0 1px; и инпуту width:100%; а бордеры пусть на отступы накладываются.

danik.js · #15 (**permalink**) 14.06.2013, 09:10

Сообщение от Nanto

box-sizing распространение получил относительно недавно, поэтому есть куча кода который надо поддерживать, а не переписывать.

И? Ну поддерживай. Какое это имеет отношение к обсуждаемой проблеме?

Сообщение от Nanto

А с процентными бордерами, уже и не помню... как вариант обернуть дивкой с margin:0 1px; и инпуту width:100%; а бордеры пусть на отступы накладываются.

Если мы добавим обертку, то и процентный паддинг нам не нужен. Это именно то, о чем я и говорю - процентный паддинг даже не представляю в каком извращении может пригодиться.

<!DOCTYPE html>
<style>
    body {
        outline: 1px dotted blue;
    }
    div {
        margin: 0 5px;
    }
    input {
        width: 100%;
        border: 1px solid red;
        padding: 4px;
        margin: 0 -5px;
    }
</style>
<div><input /></div>

Форум

Справочник

Discord чат

Курсы javascript