设计页面主页，顶端摆放菜单，且菜单用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。
网友评论