身高：100％的textarea導致垂直滾動條在Chrome

操作系統：Windows XP
瀏覽器：Chrome 31或
問題：當我看着下面，我看到一個額外的垂直滾動條：身高：100％的textarea導致垂直滾動條在Chrome

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <title>Textarea</title> 
    <style> 
     * { 
      width: 100%; 
      height: 100%; 
      margin: 0; 
      border: 0; 
      padding: 0; 
     } 
    </style> 
</head> 

<body> 
    <form> 
     <textarea></textarea> 
    </form> 
</body> 

</html>

網址：https://googledrive.com/host/0B5jOXzxlxbMhYVF3b0lubjlDWm8/textarea.html

如果我使用HTML 4.01 Transitional DOCTYPE它不會發生：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

是什麼原因和解決方案？
謝謝！

來源

2014-01-07 Mori

可以使用display: block;您textarea修復它，或者你可以使用vertical-align: top;以及..

~~Buggy Demo~~

Fixed Demo

Vertically Aligned

原因：Chrome使用display: inline-block;對於導致這個問題

enter image description here

來源

2014-01-07 07:59:04

真的嗎？ Chrome的行爲對我來說很有意義。我無法弄清Firefox如何確定textarea的基準。它看起來不符合錯誤報告中的描述。有任何想法嗎？ – Alohci

@Alohci好吧，即使你添加了'vertical-align：top'，他們的行爲也是如此，它會解決的，我會繼續並將其添加到我的答案中。 –

是的。 Chrome設置textarea基線的方式與設置img基線的方式相同，因此避免使用字體下降空間的常用方法正常工作。但Firefox以某種方式設置不同的基準。例如，請參閱jsfiddle.net/f353S/2/並嘗試調整邊距，填充和邊框寬度設置。 – Alohci

你可以做多件事情的textarea元素：

1：添加overflow: hidden您*。

* { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    border: 0; 
    padding: 0; 
    overflow: hidden; 
}

fiddle

2：使用display: block爲textarea像外星人說。

textarea { 
    display: block; 
}

，因爲它集中textarea元素，而不是你的文檔中的所有（*）元素對我推薦這種方法。

fiddle

來源

2014-01-07 08:09:10 MikaldL

身高：100％的textarea導致垂直滾動條在Chrome

回答

相關問題