输入框显示多行文本框

Question

问题很简单，
下面显示的是输入文本框。我已设置输入框值的值。加载页面时，它会以多行显示。这仅在Chrome浏览器中发生。任何帮助

HTML：
    <input type="text" name="q" id="search_q" value="why is this happening in the input box">

这是输入框的css

input[type="text"], input[type="password"], select {
border: 1px solid #D1D3D4;
padding: 3px 5px;
border-radius: 4px;
background: white;
background: -moz-linear-gradient(top, white 0%, white 0%, #F2F2F2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(0%,white), color-stop(100%,#F2F2F2));
background: -webkit-linear-gradient(top, white 0%,white 0%,#F2F2F2 100%);
background: -o-linear-gradient(top, white 0%,white 0%,#F2F2F2 100%);
background: -ms-linear-gradient(top, white 0%,white 0%,#F2F2F2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='white', endColorstr='#F2F2F2',GradientType=0 );
background: linear-gradient(top, white 0%,white 0%,#F2F2F2 100%);
}
map.generic.css:155
input, textarea {
margin: 0;
padding: 0;
font-family: Helvetica, Verdana, Arial;
color: #333;
font-size: 16px;
}
map.generic.css:148
input, a, div, textarea, img {
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
map.generic.css:142
input, a, div, textarea, img, li {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

缩小font-size后的另一张图片：

Answer 1

尝试降低其css中的字体大小或向上移动框的高度

在文本的CSS中，添加padding-bottom并将其放到例如3px ...试试吧！

Answer 2

您可以设置'溢出'：

overflow:scroll;

这将使其滚动...

但是文字的篇幅太长了......要么把它扩大，要么缩小文字大小。

Answer 3

为输入框创建一个css类，如： .input_box {height：23px; width：600px; font-size：14px;}  并使用它。如果文本正在包装，请尝试更改宽度和高度。

Answer 4

我自己想出了问题（但仍然不明白为什么），必须是chrome中的一个bug。

我尝试从css中删除以下行：

div{
   word-break:break-word;
}

tada ..它就像魅力一样。所以这一定是chrome中的一个bug。