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;与top:，left:，{一起使用{1}}和right:用于定位和调整大小。

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">

样式HTML表单，包含所有浏览器的背景图像

2 个答案: