2011-04-15 40 views
0

指定考慮下面的HTML窄得多:HTML文本區域呈現比什麼在CSS

<!DOCTYPE html> 
<html lang='en'> 
<head> 
    <meta charset='iso-8859-1' /> 
    <title>Test</title> 
    <style> 
     #IssuesListFieldSet { 
      width: 52em; 
      padding: 0; 
      margin: 0; 
     } 

     #IssuesList_result { 
      width: 52em; 
      padding: 0; 
      margin: 0; 
      border: 1px solid red; 
     } 

     #IssuesList_result_html { 
      width: 52em; 
      height: 100px; 
      display: block; 
      padding: 0; 
      margin: 0; 
      border: 2px solid cyan; 
     } 
    </style> 
</head> 
<body> 

<form action='#' method='post'> 
    <fieldset id="IssuesListFieldSet"> 
     <legend>Issues:</legend> 
     <div id="IssuesList_result"> 
      Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. 
     </div> 

     <textarea readonly id='IssuesList_result_html' cols='20' height='5'> 
      Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
     </textarea> 
    </fieldset> 
</form> 

</body> 
</html> 

如何獲得textarea的是相同的寬度,因爲它上面的DIV吧?我試圖設置每個元素大致相同的寬度,現在是52 em,但textarea呈現比這更窄。據我所知,渲染引擎細節可以拋棄幾個像素,但這裏的差異遠遠超過了這個數字(可能是40%太小)。

我在Safari 5

回答

3

em度量基於元素使用的字體。

默認情況下(在OS X上的Firefox 3.6.x中,無論如何),<textarea>元素默認爲monospace字體。

確保您已將字體應用於元素,並且它們應該匹配。

Live Demo

+0

啊,是的,那是關鍵。我只是添加了一個'字體:繼承';'規則到textarea的CSS,並且大小恰到好處。謝謝! – 2011-04-15 22:41:39

0

測試嘗試修改您的cols屬性。這也應該改變文本框的大小。

+0

其實,它沒有區別,因爲CSS覆蓋它。 – 2011-04-15 22:40:06

0

首先,刪除cols屬性。

然後,由於em是基於元素的字體大小的單位,你需要確保每一個你想大小52em的元素具有相同的font-familyfont-size CSS定義。

或者,使用像素寬度,你不應該擔心字體。

我在Firefox中試過了,只是設置了每個元素的字體大小:9pt,而忽略了font-family的效果很好。