位置絕對錯誤的IE

我有以下代碼：位置絕對錯誤的IE

<!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像素填充整個區域的textarea在它周圍填充。然而在IE（所有版本）中它只會顯示一個小小的textarea。

我這樣做的原因是因爲我將對填充屏幕的彈出框使用相同的效果，因此尺寸未知，這就是爲什麼我只是指定位置而不是使用寬度和高度。

如何解決這個問題讓它在IE中工作？ jquery也許？

只是爲了確認使用width:100%;height:100%;不會在這種情況下工作

來源

2011-07-25 Cameron

參考文章中，我看到在Firefox 5相同的結果，你描述了IE。你究竟想要達到什麼目標？如果你只是想讓文本區域符合父div的大小，那麼你會說什麼寬度，100％的高度將不起作用？ –

您需要使用哪個版本的IE？ – andyb

ie9，ie8，ie7，ie6 – Cameron

你去那裏（你需要「玩」的textarea的寬度百分比）您可以隱藏溢出滾動條：隱藏;

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

來源

2011-07-25 10:53:29 kleinohad

問題在於容器更改大小（在彈出窗口中使用時），因此百分比會導致它變得太大或太小。 – Cameron

你可以嘗試給它固定的大小 – kleinohad

的問題是，<textarea>是更換元素，有一個內在的寬度和有規則 - CSS2.1:10.3.8 - 支配最後的寬度將是什麼。具有諷刺意味的是，Webkit在這裏犯了錯，Gecko做得很對。

使用此CSS將使其在Firefox3 +，Safari和Opera以及IE8 +中工作，這是不幸的，因爲您希望它從IE6向上工作。

IE6和IE7至少呈現<textarea>在正確的寬度，所以它只是height是不正確的。由於<textarea>可用，我強烈建議將IE6/7留在此狀態。 Progressive enhancement這裏允許現代瀏覽器以更易訪問的方式渲染框，但舊瀏覽器仍然可用。否則，如果在所有瀏覽器中必須看起來相同，則可以使用快速簡單的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; 
}

用於這個答案

來源

2011-07-25 11:12:01 andyb

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

來源

2011-07-25 11:38:37 Cameron

位置絕對錯誤的IE

回答

相關問題