Як стварыць тэкставае поле (<ўвод>) у Firefox і хром выглядаць гэтак жа?

ніжэй майго HTML



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<input name="page_search" placeholder="Quick search..." type="text">
<body>
</body>
</html>

у светлячок выглядаць, як паказана ніжэй

firefox

ў хром яго, як паказана ніжэй

chrome

але ўваход (я думаю, што яго « набіванне ») з'яўляецца выглядаць па-рознаму ў Firefox і Cromo чаму?

1
так, я стараюся так, але ёсць розніца ў вышыні ў гэтых двух
дададзена аўтар user475464, крыніца
проста павялічыць вышыню. jsfiddle.net/nWgBC
дададзена аўтар Rafee, крыніца
Абвясціць памер шрыфта , сямейства шрыфтоў і вышыня радкі ўласцівасці <�б> відавочна .
дададзена аўтар user1823761, крыніца

7 адказы

Проста змяніць водступы для аўто.

check the solution here

1
дададзена

Я думаю, вам проста трэба гуляць са стылямі няшмат. Таксама рэкамендуецца выкарыстоўваць файл Reset CSS, які скідае ўсе налады стылю па змаўчанні ў браўзэрах.

Я спрабаваў наступны CSS і выглядае досыць блізка, як у Firefox і Chrome:

input {
    width: 100px;
    display: block;
    height: 10px;
    padding: 0 0 0 0px;
    font-size: 9px;
    border: solid 1px gray;
    color: gray;
}

Fiddle here: http://jsfiddle.net/5nbu6/3/

1
дададзена

Код выглядае добра, паспрабуйце дадаць гэты які падтрымлівае тэг для хрому

<meta http-equiv="X-UA-Compatible" content="chrome=1">
1
дададзена

Вы можаце выкарыстоўваць CSS скід, каб выдаліць усе стылі браўзэра па змаўчанні і паменшыць няўзгодненасці браўзэра. Папулярныя з іх ўключаюць у сябе: http://meyerweb.com/eric/tools/css/reset/</а> і http://necolas.github.io/normalize.css/ для HTML5.

0
дададзена

Вы павінны ўсталяваць памер шрыфта: 10px; таксама. Кожны з гэтых браўзэраў мае іншы ўваход па змаўчанні памеру шрыфта тэксту.

0
дададзена

паспрабаваць гэта,

input {
    width: 100px;
    display: block;
    height: 20px;
    padding: 2px;
    font-size: 9px;
    border: solid 1px gray;
    color: gray;
    font-size:12px;
    line-height:15px;
}

jsFiddle файла

0
дададзена

Выдаліць Вышыня спатрэбіцца аўтаматычна залежыць ад вашай даўжыні і шырыні тэксту

0
дададзена
... і гэта будзе адрознівацца ў залежнасці ад браўзэра, так што гэта процілегла таго, што хоча ОП.
дададзена аўтар MMM, крыніца