Css 为什么只有chrome（可能还有safari）可以很好地处理过渡（高度、宽度）？

我有一个文本区域，可以平滑地拉伸（使高度变大）：

<style type="text/css">
textarea {
  height:20px;
  width:170px;
  transition-property: all 0.2s linear; /* PS: I don't want to write all prefixes in this question */
}
  textarea:focus {
  height:30px;
}
</style>
<div style="overflow:hidden;"><!--And some good styles-->
  <textarea style="resize:none;padding:10px;"></textarea>
</div>

文本区{
高度：20px；
宽度：170px；
转换属性：所有0.2s线性；/*PS：我不想在这个问题中写入所有前缀*/
}
文本区域：焦点{
高度：30px；
}

因此，在chrome中

可以平滑地拉伸（我想要的也是

），但在opera和firefox中

可以平滑地拉伸，但

不能

我试图将转换添加到

，但没有结果

---

有解决办法吗？（注：我有一些想法可以用javascript解决它：只需将类添加到

onfocus，但我可以在没有js的情况下解决它吗？

所以，我做到了：我只需将类“active”添加到

文本区域的焦点上，以及模糊：从

中删除类“active”）。这个类所做的所有转换，比如

div {
  height: 20px;
  transition: all 0.2s linear;
}
div textarea {
  height: 10px;
  transition: all 0.2s linear;
}
div.active textarea {
  height:30px;
}
div.active {
  height:40px
}

---

它工作得很好

建议使用js，例如jquery。。。即使你让它在opera和firefox中运行，IE呢，尤其是旧版本？

transition:all 0.2s linear是一种更好的方法。在这里，您将属性和持续时间放在
转换属性值中。@Chris：问题是关于css3的，不要启动一个巨魔。@samsamX和Krylovech：我只是提一下，我也不介意，因为我不是IE用户；）然而，一个好的做法是尽可能使网站跨浏览器运行，因为IE用户（不幸的）仍然占大多数。。。但不管怎样，这是你的决定：）很好，它现在起作用了！：）@克里斯，这是很好的练习，是的。我有很多实践，所以，现在我想用现代的好技术做一个好的项目。