html - 为所有浏览器设计带有背景图像的 HTML 表单

Question

我正在创建一个在背景中有图像的 HTML 表单。目前，它仅在某些浏览器中正确排列，而在其他浏览器中仅相差几个像素。

我认为下面的 CSS 会解决我的问题，它有帮助，但它并没有解决问题。

input {
width: 105px;    
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */    
-moz-box-sizing: border-box;    /* Firefox, other Gecko */    
box-sizing: border-box;         /* Opera/IE 8+ */ 
} 

此外，所有表单输入都是浮动的并带有边距。

Answer 1

如果图像是静态大小，您可以考虑将其设置为容器的背景，然后position:relative;使用position:absolute;with top:、和进行定位和调整大小。left:right:bottom:

Answer 2

.searchBox{
  background-image:url('images/magnifying-glass.gif');
  background-repeat:no-repeat;
  padding-left:20px;
} 

现在，我们只需将输入标签分配给 CSS 类“searchBox”：

<input type="text" name="search" class="searchBox">