Question

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

但是使用scale3d似乎还可以。我能够在Chromium（30.0.1599.114）和Chrome（31.0.1650.63）中重复它，也许是webkit bug。

<!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/ - 这是一个例子。

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

感谢。

Answer 1

我改变了你的例子，只是删除了css（高度），一切都按预期进行 - 没有错误

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

1 个答案: