我的搜索框几乎没有问题

Question

我有一个搜索框。

盒子本身就是一个图像，按钮也是一个图像。

CSS如下：

.form-search {
    background: url("../images/search_form.png") no-repeat scroll 0 0 transparent;
    float: left;
    height: 44px;
    margin: 28px 0 0;
    position: relative;
    text-align: center;
    width: 442px;
}
.form-search .button {
    left: 393px;
    position: absolute;
    top: 6px;
}
.form-search .input-text {
    color: #847D7D;
    font-size: 1em;
    font-weight: bold;
    left: 93px;
    position: absolute;
    top: 13px;
    width: 270px;
}

HTML如下：

<fieldset class="form-search">
    <input type="text" class="input-text" name="keyword" value="Enter Keyword / Catalogue Code" id="textBox"/>
    <?php echo $form->error("keyword"); ?>
    <input type="image" class="button" name="search" alt="Search" src="../images/search_form_button.png" />
</fieldset>

我有一些问题。

• 首先，我试图在搜索框中找到该区域周围的一条线。我是否错过了删除外线的代码？
• 其次，用于放置文本的实际搜索框位于图像的顶部而不是内部并且很清楚。同样，我可以做些什么来删除输入类型文本框边框。
• 最后，在Chrome和IE中没有问题，但在FF中，我的按钮没有出现在它应该的位置。

我附上了我在FF中遇到的问题的图像。

更新：

我从fieldset和input元素中删除了边框。这让我只有第三个问题。 Chrome和IE显示按钮就好了，但FF没有。

Answer 1

我认为字段集默认有边框。通过在字段集上设置border: 0来删除它。您还应该重置边距，尤其是字段集和表单上的填充。

Answer 2

问题1已由GolezTrol回答。第二个是你自己解决的。

现在，关于第三个：

简短回答：删除fieldset元素的填充。

更长的答案：

每个浏览器都会为所有元素设置不同的默认值。在这种情况下，FireFox会向fieldset元素添加填充。所以你必须手动删除填充。

如果您希望这种像素完美，并希望您的网站在每个浏览器中看起来完全相同，那么通常建议使用reset style sheet。将这样的样式表首先链接到标记会阻止您在生产样式表中进行这种调整。

另一个提示：您可能会考虑扩展文本输入的大小，因为某些浏览器会在输入元素（如Chrome，Safari）周围显示焦点边框。有关示例，请参阅this demo fiddle。