Question

我的代码：

<!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

谁能帮帮我？谢谢！

Answer 1

我发现它，当我将cols和rows属性添加到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>

Answer 2

将包含元素的高度设置为100％。 IE6 / 7根据父亲的身高设定身高。

Answer 3

这是一个解决方案适用于IE7 / 8，但不适用于IE6（我只是把CSS放在这里）。

实际上，对于IE6，你不能使用“身高：100％”。这个bug可以在这里找到： Textarea 100% height in 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%;
    }

Answer 4

在我的情况下，我无法在绝对定位height:100%内设置textarea div cols并设置rows。

因此，对于IE7，我用textarea拉伸position:absolute（这种方式在任何普通浏览器中都不起作用，所以我使用了IE7 CSS * hack）：< / p>

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>

Textarea的CSS高度= 100％在IE6 / IE7中不起作用？

4 个答案: