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、IE8/IE9中做了很好的工作,但在IE6/IE7中做了一些工作。

In IE6/IE7:

“entergraph

In:

“entergraph

谁能帮助我? 感谢!

Answer 1

我发现,在文本里加栏和行文后,做以下工作:

<!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号文件(我刚才将特别安全局放在这里)。

Actually, for IE6, the you cannot use "height:100%". The bug can be found here: 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

In my case I wasn t able to set height:100% for textarea within absolutely positioned div (cols and rows were set).

因此,IE7 缩略语 (这种方式在任何正常浏览器中赢得拖车,因此,I ve使用了IE7 CSS* ha:

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;
}

传真:

<div class="textarea-wrapper">
    <textarea id="new-comment" rows="2" cols="2"></textarea>
</div>

友情链接