IE несовместимость со стилем формы CSS

Question

Исходный код выглядит следующим образом:

<div id="contact">
                <div class="form">
                    <form action="contact.php" method="post" name="contact-us">
                         <div class="right">
                            <div class="labeled">
                                <label for="text">body</label>
                            </div>
                            <textarea id="text" name="text" cols="20" rows="5"></textarea>
                        </div>
                    </form>
                </div>
            </div>

И это блок CSS для textarea и связанных объектов:

div.right {
float: right;
margin: 5px 0;
}

div.labeled {
width: 150px;
float: right;
}

div.right div.form textarea#text, textarea#text {
background: #A2A2A2;
border: 1px solid #811D1D;
height: 50px;
margin-right: 20px;
width: 220px;
color: #FFFFFF;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
}

в FF все правильно, но в IE текстовая областьне был стилизован и остается нетронутым.Вы также можете видеть разницу на изображении ниже:

Кроме того, как вы видите тег label, стилизованный как true в FF и остающийся нетронутым в IE!Как я мог это исправить?

С уважением ...

Answer 1

http://jsfiddle.net/KzYgt/

overflow: auto; - для полосы прокрутки

Answer 2

Стилизация элементов формы - это серьезный ад, поскольку большинство элементов управления стилизованы ОС и браузером, и эти стили трудно переопределить, а в некоторых случаях невозможно. Однако вы должны добиться исчезновения цвета фона и полосы прокрутки.

Вы уверены, что на вашей странице нет другого элемента с идентификатором "text"?

Хороший обзор того, что возможно с CSS для стилей textarea, можно найти здесь: http://www.456bereastreet.com/lab/styling-form-controls-revisited/text-input-multiple/#ie6-xp

Answer 3

Не все версии IE поддерживают стиль textarea.

В вашем коде текстовая область находится внутри div, который плавает прямо. Похоже, вы просите странного поведения. Лучше поместите «помеченный» div (или, скорее, удалите этот div и сделайте некоторую хитрость с самой меткой).

Answer 4

Решено!В заголовке страницы был только этот блок css:

div.form input[type="submit] {
padding: 2px;
background: #A2A2A2;
border: 1px solid #811D1D;
color: #000000;
height: 20px;
}

И, как вы видите, в [type = "submit"] есть одна потерянная кавычка.IE не может исправить код, но другие браузеры делают это!Это была проблема

Ps: отдельная благодарность @Bakudan за представление jsfiddle Online Editor

С уважением ...