Textarea的CSS高度= 100％不適用於IE6/IE7？

我的代碼：Textarea的CSS高度= 100％不適用於IE6/IE7？

<!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工作。

在IE6/IE7：

enter image description here

在Firefox：

enter image description here

誰能幫我？謝謝！

來源

2012-01-12 artwl

僅供參考ie6太老了，可能已經過時，用戶使用ie7也很小，所以給予支持並不是一個好主意。 – 2012-01-12 05:02:33

你可以參考這個URL的IE風格http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs#one-hundredpercent - 高達 – Murtaza 2012-01-12 05:04:50

但在中國，大量用戶使用ie6 – artwl 2012-01-12 05:05:15

我發現，當我添加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>

來源

2012-01-12 05:35:37 artwl

將包含元素的高度設置爲100％。 IE6/7根據父母的身高設置身高。

來源

2012-01-12 05:02:03

感謝您的回答，但它簡化版，工作 – artwl 2012-01-12 05:03:53

這是一個解決方案在IE7/8，但不是IE6（我只是把CSS放在這裏）。

其實，對於IE6，你不能使用「身高：100％」。該漏洞可以在這裏找到： 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%; 
    }

來源

2012-01-12 05:13:44 Davidsun

感謝你的答案，但它不工作我發現，當我添加cols和rows屬性textarea的，它做工精細 – artwl 2012-01-12 05:31:27

的問題出現，因爲對於任何瀏覽器，子元素需要找到其父元素來確定其大小和位置。因此，向其父母添加「職位：親戚」將解決問題。但對於IE6，由於textarea包含錯誤，因此可能無法解決問題。 – Davidsun 2012-01-12 05:40:05

在我來說，我是不是能在div（設置了cols和rows）內設置height:100%爲textarea。

因此，IE7我拉伸textarea與position:absolute（這樣不會在任何瀏覽器中正常工作，所以我用IE7 CSS *黑客）：

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>

來源

2013-10-10 07:11:15 keaukraine

Textarea的CSS高度= 100％不適用於IE6/IE7？

回答

相關問題