我正在尝试创建一个响应式导航栏，左侧有一定数量的链接，右侧有一个搜索按钮。
链接应该等于宽度，无论多少，搜索按钮应该是50px宽。当屏幕宽度小于768px时，响应起作用。
我正在使用CSS table-layout: fixed以及table-cell和table-row属性，具体取决于屏幕宽度。
然而，Firefox和Chrome似乎没有问题，但是当在宽屏和窄屏幕上来回切换时，Safari会以某种方式混淆那些相等宽度的元素（即元素先是table-cells然后table-rows和然后再回来table-cells）。
有人如何解决这个问题或者想出更好的设计？或者这只是一个Safari 6.0.2错误？
JSFiddle演示
found here。
答案 0 :(得分：0)
我认为你不需要javascript
我刚刚为表单宽度添加了：悬停，为输入添加了另一个：hover ，它修复了safari上的问题，当你悬停文本输入时，表单获取再次宽度为50px（如果这就是你的问题）
#searchform:hover {
width:250px;
}
#searchform:hover input#s {
display: inline;
}
在jsfiddle中尝试我的编辑