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

当高度属性不是自动时，输入元素上的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/-这里有一个例子。

有什么解决方法或更多信息吗？我是不是错过了什么？

谢谢。

我更改了您的示例，只是删除了css（高度），一切都如预期那样进行-没有错误

相关内容

最新更新

热门标签：