Высота CSS = 100% для Textarea не работает в IE6 / IE7? - PullRequest
Новая
       3

Высота CSS = 100% для Textarea не работает в IE6 / IE7?

4 голосов
/ 12 января 2012

Мой код: 

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        body {
            background: none repeat scroll 0 0 #EFEFEF;
            overflow: hidden;
            position: relative;
            margin: 0px;
            padding: 10px;
        }
        div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
            margin: 0;
            padding: 0;
        }
        #content{
            height:200px;
        }
        fieldset,textarea{
            border: 0 none;
        }
        #LeftPanel
        {
            width: 48%;
            float: left;
            height:100%;
        }
        .window {
            border: 1px solid #ADADAD;
            width: 100%;
            float: left;
        }
        .top {
            height: 25%;
        }
        .bottom {
            height: 75%;
        }
        .code{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
<div id="content">
    <fieldset id="LeftPanel">
        <div id="div_A" class="window top">
            <textarea id="code_A" class="code">A</textarea>
        </div>
        <div id="div_B" class="window bottom">
            <textarea id="code_B" class="code">B</textarea>
        </div>
    </fieldset>
</div>
</body>
</html>

Хорошо работает в Chrome, Firefox, IE8 / IE9, но не работает в IE6 / IE7.

В IE6 / IE7:

enter image description here

В Firefox:

enter image description here

Кто может мне помочь? Спасибо!

Ответы [ 4 ]

1 голос
/ 12 января 2012

Я обнаружил, что когда я добавляю свойство cols и row к Textarea, оно работает нормально: 

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
         body {
            background: none repeat scroll 0 0 #EFEFEF;
            overflow: hidden;
            position: relative;
            margin: 0px;
            padding: 10px;
        }
        div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
            margin: 0;
            padding: 0;
        }
        #content{
            height:200px;
        }
        fieldset,textarea{
            border: 0 none;
        }
        #LeftPanel
        {
            width: 48%;
            float: left;
            height:100%;
        }
        .window {
            border: 1px solid #ADADAD;
            width: 100%;
            float: left;
        }
        .top {
            height: 25%;
        }
        .bottom {
            height: 75%;
        }
        .code{
            width:100%; 
            height: 100%;
        }
    </style>
</head>
<body>
<div id="content">
    <fieldset id="LeftPanel">
        <div id="div_A" class="window top">
            <textarea rows="20" cols="40" id="code_A" class="code">A</textarea>
        </div>
        <div id="div_B" class="window bottom">
            <textarea rows="20" cols="4" id="code_B" class="code">B</textarea>
        </div>
    </fieldset>
</div>
</body>
</html>
0 голосов
/ 10 октября 2013

В моем случае я не смог установить height:100% для textarea в абсолютно позиционированном div (были установлены cols и rows).

Таким образом, для IE7 я растянул textarea с position:absolute (этот способ не будет работать ни в каком обычном браузере, поэтому я использовал IE7 CSS * hack):

CSS: 

.textarea-wrapper {
    height: auto;
    position: absolute;
    top: 0;
    bottom: 67px;
    left: 0;
    right: 0;
}

textarea {
    width: 100%;
    height: 100%;
    padding: 5px;
    margin: 0;
    border: 1px solid #CCC;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: auto;

    *width: 99%;
    *position: absolute;
    *top: 0;
    *bottom: 0;
    *left: 0;
    *right: 0;
    *height: auto;
}

HTML: 

<div class="textarea-wrapper">
    <textarea id="new-comment" rows="2" cols="2"></textarea>
</div>
0 голосов
/ 12 января 2012

Это решение работает в IE7 / 8, но не в IE6 (я просто поместил здесь CSS).

На самом деле, для IE6 нельзя использовать «height: 100%».Ошибка может быть найдена здесь: Высота текстовой области 100% в IE 

    body {
        background: none repeat scroll 0 0 #EFEFEF;
        overflow: hidden;
        position: relative;
        margin: 0px;
        padding: 10px;
    }
    div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
        margin: 0;
        padding: 0;
    }
    #content{
        height:200px;
        position:relative;
    }
    fieldset,textarea{
        border: 0 none;
    }
    #LeftPanel
    {
        width: 48%;
        float: left;
        height:100%;
        position:relative;
    }
    .window {
        position:relative;
        border: 1px solid #ADADAD;
        width: 100%;
        float: left;
    }
    .top {
        height: 25%;
    }
    .bottom {
        height: 75%;
    }
    .code{
        width:100%; 
        height: 100%;
    }
0 голосов
/ 12 января 2012

Установите высоту содержащего элемента на 100%.IE6 / 7 устанавливает высоту в зависимости от высоты родителя.

...