我正在尝试制作一个非常简单的 XHTML/CSS 水平工具栏，其中包含几个“选项卡”，其中 1 个是一个非常简单的搜索表单。
我有以下 XHTML 代码:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
<title>Form test</title>
</head>
<body>
<div id="toolbar">
<div id="toolbar-content-wrapper">
<div id="toolbar-content">
<div class="toolbar-tab"><div>Language: EN</div></div>
<div class="toolbar-tab"><div id="search-box"><form action="search.php" method="get"><fieldset><input name="q" type="text"/><input value="Search!" type="submit"/></fieldset></form></div></div>
<div class="toolbar-tab"><div>hello-how-are-you?</div></div>
</div>
</div>
</div>
</body>
</html>
和以下 CSS:
* {
margin: 0;
padding: 0;
}
#toolbar {
background-color: lightgray;
width: 100%;
/* A trick to make div expand vertically to embrace floats. */
overflow: hidden;
}
#toolbar-content-wrapper {
display: table;
float: right;
}
#toolbar-content {
display: table-row;
}
#toolbar-content > div.toolbar-tab {
background-color: black;
display: table-cell;
padding: 0 2em;
vertical-align: bottom;
}
#toolbar-content > div.toolbar-tab > div {
background-color: yellow;
color: black;
border: thin solid black;
}
#search-box form, #search-box fieldset, #search-box input {
border-style: none;
}
#search-box form {
display: table;
background-color: red;
}
#search-box fieldset {
display: table-row;
background-color: orange;
}
#search-box input {
display: table-cell;
}
#search-box input[type=text] {
background-color: white;
}
#search-box input[type=submit] {
background-color: blue;
color: white;
}
这在 Epiphany 2.30.6 中呈现良好，但在 Iceweasel 3.5.16 中非常糟糕。请在此处查看屏幕截图:http://people.eisenbits.com/~stf/load/2012-08-23-form-test/ .在 Iceweasel 3.5.16 中 <form> 的红色背景和 <fieldset> 的橙色背景可见!为什么？
最佳答案
您所要做的就是为这些元素添加 line-height: 0;。
在 webkit 中效果很好，但由于“搜索”按钮的高度，在 FireFox 中留下了小条子。
关于css - 如何布局具有 1 个输入字段 + 提交按钮的表单，以便 <form> 和 <fieldset> 背景不会发光？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12095838/