Почему Firefox интерпретирует верхнее смещение иначе, чем Chrome, Safari и IE? - PullRequest
Новая
       39

Почему Firefox интерпретирует верхнее смещение иначе, чем Chrome, Safari и IE?

2 голосов
/ 05 августа 2011

Возьмем следующий пример:

enter image description here

Это текстовая область с фоновым изображением (серая полоса) и относительным позиционным делителем после текстовой области с верхним смещением впереместите текст на место.

Разметка: 

<textarea cols="40" rows="6" class="some_textarea">Hello</textarea>
<div class="message_text">This is a message</div>

CSS: 

.some_textarea {
  background: transparent url(gray_bar.png) repeat-x 50% 100%;
  width: 99%;
  padding: 5px;
  margin: 0;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 13px;
  border: 1px solid #C3C3C3;
}

.message_text {
  display: inline;
  color: #999;
  font-size: 10px;
  position: relative;
  top: -21px;
  padding: 0 6px;
}

Проблема в том, что Firefox - единственный браузер, который не согласенсо смещением, и приводит к этому очень маленькому пиксельному раздражению нажатия:

enter image description here

Что вызывает это?Как я могу это исправить для согласованности?Какие обходные пути существуют, если их нельзя исправить?

Ответы [ 2 ]

2 голосов
/ 05 августа 2011

UPDATE

http://jsfiddle.net/UnsungHero97/maHkr/7/

Как насчет чего-то подобного ...

http://jsfiddle.net/UnsungHero97/maHkr/2/

То, что я сделал, заключил вашу текстовую область / комбо в относительно позиционированный div, а затем переместил абсолютно левое нижнее сообщение. Вы можете играть с точным позиционированием / полями / отступами, чтобы он выглядел хорошо во всех браузерах.

Надеюсь, это поможет.
Христо

0 голосов
/ 30 марта 2012

используйте jQuery (окно) .load () вместо jQuery (документ) .ready ()

...