4

我已经使用自定义背景图像设置了提交按钮的样式。但它在不同的浏览器上显示不同。

几乎所有浏览器都显示正确：

在此处输入图像描述

但是在 2 上它有额外的高度：

在此处输入图像描述

谁能指出我的标记有什么问题？

CSS：

input[type="submit"]{
    background: url(http://dl.dropbox.com/u/17055243/icons.png) -99px 0px  no-repeat;
    width:30px;
    height:30px;
    border:none;
    float:left;
    margin:30px 0 0;
    cursor:pointer;
}

HTML：

<form>
    <input type="text" class="placeholder" value="Search" />
    <input type="submit" value="" />
</form>

测试：

  • IE 8.0不错
  • IE 7.0不错
  • iPhone不错
  • Chrome 24.0不错
  • 火狐 18.0.2不错
  • Safari 5.1 (Mac OS X 10.7.1)好
  • Opera 12.14 (Windows 7 32-bit)好
  • Safari 5.1.7（Windows 7 32 位）额外高度
  • Opera 11.51 (Mac OS X 10.7.1)额外高度

jsfiddle 上的现场演示。

4

4 回答 4

5

在我看来，文本框的高度与提交按钮不同。尝试设置文本框的高度。

于 2013-02-18T13:22:33.070 回答
1

我在第二个搜索栏中看到，文本是斜体的，看起来略小。我认为搜索栏正在适应文本并使其自身变小，这使得搜索图标显得更大。

您可能需要做的是将其添加到控制占位符的样式表中：

{font-style:normal}
于 2013-02-18T14:44:02.843 回答
0

提交按钮和输入文本字段的边框、边距、填充等具有不同的默认值。首先，您必须将其用于提交按钮和文本字段

margin:0;
padding: 0;
border: none;
outline: none;
于 2014-05-21T01:52:21.363 回答
0

尝试这个。它会给元素一个固定的高度。

input[type="text"]{
    margin:30px 0 0;
    width:226px;
    color:#999999;
    font-size:12px;
    font-style:italic;
    border:1px solid #cccccc;
    border-right:none;
    background-color:#ededed;
    float:left;
    height:28px;
    padding-right: 7px;
    padding-left: 7px;
    line-height: 28px;
}
于 2013-02-18T13:23:19.060 回答