Значения браузера по умолчанию

Question

Я разрабатываю простую страницу с формой. Когда я помещаю вводимый текст на страницу, символы, которые появляются внутри элемента ввода, имеют значения по умолчанию для браузера. В chrome, используя инструменты разработчика, я вижу, что для шрифта по умолчанию установлено значение «webkit-small-control». Но одно из полей, которые появятся на странице, будет просто полем с данными, подобными этим

<td>
   <span id="readOnlyField">data</span>
</td>

Когда я отображаю страницу, данные внутри поля span не равны данным внутри текстового поля ввода. У меня вопрос, как я могу узнать шрифты и цвета, которые браузер применяет к текстовому полю ввода? Я не могу использовать значение "webkit-small-control", потому что не будет работать в другом браузере.

Answer 1

Я заметил это только в Safari на Mac.Чтобы все отображало содержимое должным образом, необходимо переопределить таблицу стилей пользовательского агента Safaris:

font: -webkit-small-control;

можно переопределить, используя это в файле reset.css:

button, input, textarea, select, isindex, datagrid {
    font: inherit;
}

Я не могукажется, найти это в любой reset.css, но это помогло мне.

Answer 2

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

Хорошей практикой является использование таблицы стилей «CSS reset» для переопределения настроек браузера по умолчанию вашими собственными «базовыми» стилями. В сети существует множество примеров сброса CSS, например HTML5 Doctor's one или Eric Meyer 'one . В то время как ваш вопрос касается только стиля шрифта, сброс других стилей предотвращает многие головные боли в долгосрочной перспективе.

Answer 3

Это поведение WebKit.

См. https://bugs.webkit.org/show_bug.cgi?id=50092

Для решения см .: http://sijobling.com/tips/css-fix-for-html5-search-in-webkit/

Answer 4

Если вы хотите использовать javascript, вы можете использовать getComputedStyle для поиска этих данных (см. Сеть разработчиков Mozilla ).

Для старых браузеров IE вам потребуетсяиспользуйте свойство currentStyle (см. Quirksmode ).

Чтобы скопировать ВСЕ стили из одного элемента в другой, вы можете сделать что-то подобное (я упростил это, чтобы поддерживать только современные браузеры)):

var spanElement = document.querySelector('#mySpanElement');
var inputElement = document.querySelector('#myInputElement');
var styles = getComputedStyle(inputElement);
for (var name in styles) {
    spanElement.style[name] = styles[name];
}

Вы, вероятно, обнаружите, что хотите отфильтровать их, или возьмите только те, которые вам действительно нужны.

Answer 5

На вашей странице нет способа узнать, какой шрифт используется браузером по умолчанию. Вы также не можете указать в CSS, что браузер отображает элемент span, используя любой шрифт, который он использует по умолчанию для элемента input.

Но вы можете сделать так, чтобы текст в span и input элементах выглядел одинаково (с обычными CSS-предупреждениями, конечно), явно установив их font-family и font-size, например,

input, span { font: 100% Arial, sans-serif; }

Теоретически, вам может потребоваться установить и другие свойства (не существует закона, запрещающего браузеру отображать содержимое элемента input с мигающим фиолетовым цветом, подчеркнутым по умолчанию), но это должно позаботиться о вещах на практике. Обратите внимание, что настройка размера шрифта необходима, потому что браузеры обычно используют уменьшенный размер шрифта (около 90%) для полей ввода.

Answer 6

Цвет по умолчанию для всех основных браузеров для шрифтов - # 000, но вы можете установить его так, как вам нравится.Шрифт, который вы можете установить на любой желаемый, пока он находится в системе, просматривающей его.Эти значения по умолчанию можно найти в Google.

Answer 7

По этой причине вам следует сначала сбросить все стили или использовать некую установленную среду CSS, такую ​​как blueprint , и избегать повторного изобретения колеса.

Вероятно, вы должны переопределить любой стиль, который выхочу в вашем css для aovid браузер по умолчанию

Answer 8

Невозможно точно определить, какой размер шрифта по умолчанию выберет браузер.

Вместо этого следует сбросить CSS (например, с помощью Normalize ).) и далее стиль ваших страниц, например:

span.some-class {
  font-size: 12px;
  color: #333;
}

А затем ваш HTML:

<span class="some-class" id="readOnlyField">data</span>