Позиционировать абсолютную ошибку на textarea в IE - PullRequest
Новая
       0

Позиционировать абсолютную ошибку на textarea в IE

3 голосов
/ 25 июля 2011

У меня есть следующий код: 

<!doctype html>
<html lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
            *
            {
                margin: 0;
                padding: 0;
            }
            div#container
            {
                position: relative;
                top: 100px;
                left: 100px;
                width: 640px;
                height: 480px;
                background: #ff0000;
            }
            textarea
            {
                position: absolute;
                top: 20px;
                left: 20px;
                right: 20px;
                bottom: 20px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <textarea></textarea>
        </div>
    </body>
</html>

Если вы протестируете это в любом другом браузере, кроме IE, вы увидите красное поле и текстовую область, которая заполняет всю область с отступом в 20 пикселей вокруг него.Однако в IE (все версии) он просто покажет крошечную текстовую область.

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

Как это исправить, чтобы она работала в IE?jquery возможно?

Просто подтвердить, что использование width:100%;height:100%; не будет работать в этом случае

Ответы [ 3 ]

5 голосов
/ 25 июля 2011

Проблема в том, что <textarea> является замененным элементом и имеет собственную ширину, и существуют правила - CSS2.1: 10.3.8 - которые определяют, какая конечная ширинабудет.По иронии судьбы, здесь виноват Webkit, и Gecko делает это правильно.

Использование этого CSS заставит его работать в Firefox3 +, Safari и Opera и IE8 +, что вызывает сожаление, поскольку вы хотите работать с IE6 и выше.

IE6 и IE7 по крайней мере отображают <textarea> вправильная ширина, поэтому это просто height, который является неправильным.Я настоятельно рекомендую оставить IE6 / 7 в этом состоянии, поскольку <textarea> можно использовать. Прогрессивное улучшение здесь позволяет современным браузерам визуализировать блок более доступным способом, но старые браузеры все еще можно использовать.В противном случае можно использовать быструю простую функцию JavaScript, чтобы установить высоту для IE6 / 7, если она должна выглядеть одинаково во всех браузерах. 

div#container {
    position:relative;
    top:100px;
    left:100px;
    width:600px;
    height:440px;
    background: #ff0000;
    padding:20px;
}
textarea {
    position:relative;
    width:100%;
    height:100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Справочные статьи, используемые дляэтот ответ

0 голосов
/ 25 июля 2011 
<!doctype html>
<html lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
            *
            {
                margin: 0;
                padding: 0;
            }
            div#container
            {
                position: relative;
                top: 100px;
                left: 100px;
                width: 640px;
                height: 480px;
                background: #ff0000;
            }
            .box
            {
                position: absolute;
                top: 20px;
                left: 20px;
                right: 20px;
                bottom: 20px;
            }
            textarea
            {

                overflow-y: scroll;
                width:100%;
                height:100%;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="box">
                <textarea></textarea>
            </div>
        </div>
    </body>
</html>
0 голосов
/ 25 июля 2011

вот так (вам нужно «поиграть» с процентом ширины текстовой области), вы можете скрыть полосу прокрутки с переполнением: hidden; 

   <!doctype html>
<html lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
            *
            {
                margin: 0;
                padding: 0;
            }
            div#container
            {
                position: relative;
                top: 100px;
                left: 100px;
                width: 640px;
                height: 480px;
                background: #ff0000;
            }
            textarea
            {
                position: absolute;
                top: 20px;
                left: 20px;
                right: 20px;
            bottom: 20px;
            width:93%;
height:92%;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <textarea></textarea>
        </div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...