输入字段和 css 转换比例在 chrome 中无法正常工作答案

【问题标题】：input field and css transform scale is not working properly in chrome输入字段和 css 转换比例在 chrome 中无法正常工作
【发布时间】：2013-12-24 07:18:35
【问题描述】：

当 height 属性不是 auto 时，输入元素上的 CSS 变换比例将值文本移动到容器之外。

但使用 scale3d 似乎还可以。我能够在 Chromium (30.0.1599.114) 和 Chrome (31.0.1650.63) 中重复它，可能是 webkit 错误。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script src="http://code.jquery.com/jquery-2.0.2.js"></script>
  <style>
   .phone-first { height: 30px; }
  </style>
</head>
  <body>
    <input class="phone-first" type="text" name="phone" value="+71231231213">
    <br><br><br>
    <input class="phone-second" type="text" name="phone" value="+71231231213">
    <br><br><br>
    <a href="#" class="p">scale 2</a>
    <br>
    <a href="#" class="m">scale 1</a>
    <br><br><br>
    <a href="#" class="p3d">scale3d 2</a>
    <br>
    <a href="#" class="m3d">scale3d 1</a>

    <script>
        var $phone = $('.phone-first, .phone-second');
        $('.p').click(function() { $phone.css('transform', 'scale(2, 2)'); });
        $('.m').click(function() { $phone.css('transform', 'scale(1, 1)'); });
        $('.p3d').click(function() { $phone.css('transform', 'scale3d(2, 2, 2)'); });
        $('.m3d').click(function() { $phone.css('transform', 'scale3d(1, 1, 1)'); });
    </script>
  </body>
</html>

http://jsfiddle.net/j67H3/ - 这是一个例子。

关于此的任何解决方法或更多信息？我错过了什么吗？

谢谢。

【问题讨论】：

不知道。不过是个好问题。我试图让它在 Mozilla 上运行，但我似乎在那里遇到了兼容性错误。
@MrLister，你遇到了什么错误？需要更多信息。我在火狐当前测试过，没问题。
对不起，我似乎错误地在 jsFiddle.net 上屏蔽了脚本。现在好了。

标签： html css google-chrome transform scaletransform

【解决方案1】：

我更改了您的示例，只是删除了 css(height)，一切都按预期进行 - 没有错误

【讨论】：

是的，这是真的。但是如果我需要一个非标准的高度怎么办？.. 所以，code.google.com/p/chromium/issues/… 我认为这是铬/铬错误。
ai不知道该告诉你什么，因为我没有找到任何其他解决方案