1

我正在尝试用几个“选项卡”制作一个非常简单的 XHTML/CSS 水平工具栏，其中一个是一个非常简单的搜索表单。

我有以下 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>是可见的！为什么？

4

1 回答 1

0

您所要做的就是添加line-height: 0;这些元素。

在 webkit 中效果很好，但由于“搜索”按钮的高度，在 FireFox 中留下了小条。

于 2012-08-23T18:55:29.847 回答