Как разрешить разницу CSS-разметки в разных браузерах?

Я использую CSS bootstrap CSS. Ниже вы можете увидеть, как один и тот же код отображается по-разному с FireFox и Chrome.

Это довольно странно. Firebug сообщает мне, что placeholder css установлен так, чтобы светло-серый:

:-moz-placeholder {
    color: #999999;
}

Это должно влиять на все заполнители во всех элементах, как это было правильно сделано в Chrome. Но в Firefox почему textareas правильно применяется, но input нет? Как я могу это исправить?

<input id="id_referred_by" type="text" maxlength="50" name="referred_by" placeholder="...was referred by?">

<textarea id="id_contacts_interests" name="contacts_interests" cols="40" placeholder="Any particular interests?" rows="4"></textarea>

Chrome:

Firefox:

обновление:

Комментарии ниже дали мне идею:

input имеет отличие от textarea записи color: #9999, перечеркнутой, что означает, что что-то ее переопределяет.

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    color: #555555;
    display: inline-block;
    font-size: 13px;
    height: 18px;
    line-height: 18px;
    margin-bottom: 9px;
    padding: 4px;
}

На самом деле это color: #555555;. Когда я отключу его в firebug, все работает. Почему Chrome не заботится об этом, но Firefox делает? Любые советы, как исправить это в обоих браузерах? Я все еще новичок в css.

Ответ 1

Я сделал небольшую скрипку некоторое время назад из-за этого странного псевдоэлемента, результат? Вы не можете добавить кому между селектором, вам нужно дважды указать правило, что стыдно.

HTML:

<input type="text" id="test-webkit" placeholder="test-webkit" /><br />
<input type="text" id="test-moz" placeholder="test-moz" /><br />
<input type="text" id="test-both" placeholder="test-both" /><br />
<input type="text" class="test-both" placeholder="test-both-separately" />

CSS:

/* Works on Webkit */
#test-webkit::-webkit-input-placeholder {
    color: red;
}

/* Works on Firefox */    
#test-moz:-moz-placeholder {
    color: red;
}

/* Don't work */
#test-both::-webkit-input-placeholder, #test-both:input:-moz-placeholder {
    color: red;
}

/* Works on both */
.test-both::-webkit-input-placeholder {
    color: red;
}
.test-both:-moz-placeholder {
    color: red;
}

The Fiddle.

Ответ 2

Проблема заключается в том, что Firefox меняет непрозрачность поля, и с этим вы считаете его другим цветом, но его нет... добавьте "opacity: 1;" и он будет работать точно так же во всех браузерах

input:-moz-placeholder {
    color: #999999;
    opacity: 1;
}

input::-moz-placeholder {
    color: #999999;
    opacity: 1;
}

Ответ 3

Как обновление под полным списком заполнителей, которые вам нужно использовать.: -moz устарел в новых версиях firefox.

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

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color:#bbb;
  font: 12px Verdana, Arial,Tahoma, sans-serif;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color:#bbb;
  font: 12px Verdana, Arial,Tahoma, sans-serif;
}
input::-moz-placeholder, textarea::-moz-placeholder {
  color:#bbb;
  font-family: 12px Verdana, Arial,Tahoma, sans-serif;
  font: normal;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color:#bbb;
  font: 12px Verdana, Arial,Tahoma, sans-serif;
}

Ответ 4

Очистите кеш firefox (этого может быть достаточно).

и проверить с помощью firebug

установить firebug, если он уже не сделан уже https://addons.mozilla.org/en-US/firefox/addon/firebug/

щелкните правой кнопкой мыши на вкладке и нажмите "Проверить элемент с помощью Firebug".

чтобы увидеть, есть ли свойство css с более высоким приоритетом.