html - CSS の table-layout プロパティを持つナビゲーションバー (table-cell と table-row の問題)

Question

左側に未定のリンク数があり、右側に検索ボタンがあるレスポンシブナビゲーションバーを作成しようとしています。

リンクはいくつあっても同じ幅で、検索ボタンは 50 ピクセルの幅にする必要があります。画面幅が 768px 未満の場合、レスポンシブが有効になります。

画面の幅に応じて、CSSとプロパティtable-layout: fixedも使用しています。table-celltable-row

ただし、Firefox と Chrome は問題ないように見えますが、広い画面と狭い画面を前後に切り替えると、どういうわけか Safari が同じ幅の要素を台無しにします (つまり、要素が最初table-cellsにtable-rowsあり、次に再び戻るtable-cells)。

これを修正する方法や、より良いデザインを考え出す方法はありますか? それとも、これはただの Safari 6.0.2 のバグですか?

JSFiddle デモ
はこちらにあります。

score 0 · Accepted Answer

そのためにjavascriptが必要だとは思わない

フォームの幅に :hover を追加し、入力に別の: hoverを追加したところ、Safari の問題が修正されました。テキスト入力をホバーすると、フォームの幅が再び 50px になります (それが問題である場合)。

#searchform:hover {
width:250px;
}

#searchform:hover input#s {
display: inline;
}

私の編集をjsfiddleで試してください

html - CSS の table-layout プロパティを持つナビゲーション バー (table-cell と table-row の問題)