带有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小提琴