Question

我遇到的问题是输入元素的宽度因浏览器而异。 Chrome提供的宽度不正确，其中宽度应为宽度+填充，现在为宽度，总填充为最小宽度。

HTML

<input type="search" name="keywords" id="ctrl_keywords_2" class="text" value="">

CSS

input {
width: 76px;
padding-right: 52px;
padding-left: 24px;
}

我已经an example here进行了测试。

Answer 1

输入类型搜索存在限制，如此处所述，http://css-tricks.com/webkit-html5-search-inputs/

input[type=search] {    
    padding: 30px;            /* Overridden by padding: 1px; */
    font-family: Georgia;     /* Overridden by font: -webkit-small-control; */
    border: 5px solid black;  /* Overridden by border: 2px inset; */
    background: red;          /* Overridden by background-color: white; */
    line-height: 3;           /* Irrelevant, I guess */
}

Answer 2

添加type =“search”

input [type="search"]{
width: 75px;
padding-right: 52px;
padding-left: 24px; 
}

演示http://jsfiddle.net/Sqyn7/1/

Answer 3

确保您已包含您的doctype，因为这通常是跨浏览器问题的问题

在chrome中输入字段宽度和填充

3 个答案: