1

いくつかの「タブ」を備えた非常に単純な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では問題なくレンダリングされますが、Iceweasel3.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 に答える