javascript - 缩小 90%、67%、33% 时，文本输入会出现间隙

Question

我的文本框输入有问题，当用户缩小页面时，这个文本框超出了它的 div，但奇怪的是它只发生在缩放为 90%、67%、33% 时……文本框当缩放为 100%、75%、50% 时看起来很好。 我的 CSS 类如下所示:

    #someDropdown .someTextbox {
      margin-left: -24px; 
      background: #fff; 
      margin-top: -5px; 
      padding-left: 25px;
      width: 100%;

      zoom:1;
      -ms-transform: scale(1); /* IE 9 */
      -ms-transform-origin: 0 0;
      -moz-transform: scale(1); /* Firefox */
      -moz-transform-origin: 0 0;
      -o-transform: scale(1); /* Opera */
      -o-transform-origin: 0 0;
      -webkit-transform: scale(1); /* Safari And Chrome */
      -webkit-transform-origin: 0 0;
      transform: scale(1); /* Standard Property */
      transform-origin: 0 0;  /* Standard Property */
    }

所以，我想知道是否有任何方法可以纠正此行为，我也尝试使用“位置:固定”但是文本框位于左侧/顶部，这不是我正在寻找的正确行为。

Answer 1

我使用了 scale(1) 来避免它在浏览器中看起来不一样，-我以前也遇到过-，但是我可以用像这样的其他 css 来解决它:

#someDropdown .someTextbox {
      margin-left: -24px;
      margin-right: -20px;
      background: #fff;
      margin-top: -5px;
      padding-left: 25px;
      padding-top: 0px;
      padding-bottom: 0px;
      width: 100%;
    }