Как удалить поле ниже текстового поля внутри обертки div (webkit)

 <!DOCTYPE html>
 <html> 
 <head>
 </head>
 <body>
      <div style="background-color:#f09;">
           <textarea></textarea>
      </div>
 </body>
 </html>

Результат в Chrome:

удалена мертвая ссылка ImageShack

Результат в FF:

удалена мертвая ссылка ImageShack

Ответ 1

Попробуйте отобразить: блок в текстовом поле:

 <!DOCTYPE html>
 <html> 
 <head>
      <style type="text/css">
           textarea {display:block;}
      </style>
 </head>
 <body>
      <div style="background-color:#f09;">
           <textarea></textarea>
      </div>
 </body>
 </html>

Проблема заключается в том, что textarea является встроенным и использует высоту текста, чтобы добавить немного дополнительного дополнения. Вы также можете указать:

 <!DOCTYPE html>
 <html> 
 <head>
 </head>
 <body>
      <div style="background-color:#f09;line-height:0px;font-size:1px;">
           <textarea></textarea>
      </div>
 </body>
 </html>

Другой вариант, который полезен, если вы хотите сохранить текстовое поле inline и не хотите вмешиваться в свойства шрифта родительского блока (я предлагаю это по сравнению с предыдущим методом с высотой строки):

 <!DOCTYPE html>
 <html> 
 <head>
      <style type="text/css">
           textarea {vertical-align:middle;}
      </style>
 </head>
 <body>
      <div style="background-color:#f09;">
           <textarea></textarea>
      </div>
 </body>
 </html>

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

Ответ 2

Настройка режима отображения для блокировки сделала трюк для меня. Чтобы уточнить, вот объявление, которое нужно добавить в таблицу стилей. Я бы рекомендовал добавить его в ваш reset или нормализовать таблицу стилей, в первую очередь.

textarea {
    display:block
}

Ответ 3

У меня обычно есть "первая строка" в каждом файле global.css, который я делаю. говоря:

<style>    
html,body,p,h1,h2,h3,h4,h5,h6,img,table,td,th 
{
   margin:0;padding:0;border:none;
   font-familiy:"my sites default font";font-size:10px;
}
</style>

После этого я чувствую, что полностью контролирую поведение браузеров при тестировании на 5 разных платформах: Chrome, Firefox, Safari, Opera и... doh... Microsoft Internet Extracrap..

Затем вы можете легко сделать что-то подобное для <input> и <textarea> тоже. если первая строка слишком много, то просто создайте вторую строку для "особых случаев".

<style>
textarea {margin:0; padding:0; border:none; display:block;}
</style>

Помните, что CSS наследует, поэтому вы можете иметь несколько объявлений разных классов.

Удаляет ли это вашу проблему?