设计页面主页,顶端摆放菜单,且菜单用float自左至右设置了三个div:logo、nav、account。在浏览器缩小时,出现了很多问题,依次解决如下。
1、现象:窗口缩小,菜单内容完全错乱。
解决办法:为三个内层浮动的div设置宽度。比如中间的菜单不设置宽度,浏览器缩小后左侧account就会与nav重叠。
2、现象:窗口缩小,菜单子项换行显示。
解决办法:因设置了float,在菜单没有具体宽度的限制时,菜单内的float浮动子div就会自动挤到下一行显示。此时,应为菜单设置最小宽度,比如min-width:1580px,这样在窗口缩小的最小宽度后,菜单内的子div将不会被挤到下一行,而是需要由滚动条显示。
3、现象:窗口缩小,菜单子nav被自动换行
解决办法:在给菜单设置了min-width的同时,要给nav设置一个具体的宽度比如width:800px,这样nav有了具体的大小,就不会再在窗口缩小时被挤到下一行。
4、现象:窗口缩小,菜单随之缩小,但水平滚动条向右侧拉会出现空白。
解决办法:浏览器对宽度的解释出现问题。比如最外层div设置width:100%,菜单div的min-width:1580px,浏览器无法正确解释。因此也要为最外层div再设置min-width和min-height,且头部元素的宽度不能小于内容层的宽度即可。当浏览器窗口缩小时,保持页面容器和头部元素的最小宽度为内容层的宽度。比如最外层min-width:1580px,nav的min-width:1480px。