帶有CSS table-layout屬性的導航欄（table-cell和table-row的問題）

Question

我正在嘗試制作一個響應式導航欄，其左側的鏈接數量不確定，右側的搜索按鈕數量不確定。

鏈接的寬度應該相等，無論多少，搜索按鈕的寬度都應為50px。 當屏幕寬度小於768px時，響應式起作用。

我正在使用CSS table-layout: fixed根據屏幕寬度， table-layout: fixed了table-cell和table-row屬性。

但是，Firefox和Chrome似乎還可以，但是Safari在來回切換寬屏和窄屏時以某種方式弄亂了那些寬度相等的元素（即，元素首先是table-cells然后是table-rows ，然后又是table-cells ） 。

有誰能解決這個問題或提出更好的設計？ 還是僅僅是Safari 6.0.2錯誤？

JSFiddle演示
在這里找到 。

Answer 1

我不認為您需要使用javascript

我只是為表單寬度添加了一個：hover ，為輸入添加了另一個：hover ，它解決了Safari上的問題，當您將鼠標懸停在文本輸入上時，表單再次獲得50px寬度（如果那是您的問題所在）

#searchform:hover {
width:250px;
}

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

嘗試在jsfiddle中進行編輯

JS小提琴