Windows 10上的导航菜单渲染问题

时间:2016-10-14 作者:Sheryl

我有一个网站https://goo.gl/fk8X7z 显示导航。Windows 10的Google Chrome版本53.0.2785.143上的菜单呈现问题。商店菜单完全偏离其原来的位置,即黑色条纹(http://prntscr.com/ctvxgv) 同样的菜单在Windows 7上显示良好。我们如何解决这个问题?

谢谢

1 个回复
SO网友:anthony.s

“ul”元素的宽度设置为1000px,在某些系统上,最后一个子“li”元素正在换行,因为一行中没有足够的空间容纳所有元素(由于字体渲染、百分比计算等原因,在某些系统中为一行)

您可以使“ul”元素100%宽,并将内部“li”元素居中。

.main_menu1 .wrapper {
    width: 100%;
    text-align: center;
}

.nav1 .main_menu1 ul li {
    display: inline-block;
    float: none;
}
这应该可以修复对于大于包装器最大宽度1000px的屏幕的bug。它是什么;实际上,对于网站的响应性来说,让子元素精确地匹配到容器中的像素是一种不好的做法;不使用百分比值、其他一些技术,或者在元素在新行上断裂时准备。而且,您仍然需要修复较小屏幕上的菜单问题(低于或接近您的包装器最大宽度1000px)。用更少的语言;菜单没有完全响应。

相关推荐

responsive screen not working

我已经试着让它像这样响应:https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image2, 我希望它像图像一样收缩,无论它中的屏幕是什么,它都会在位置上匹配,想象一下我放入每个框中的图像,但似乎失败了。https://jsfiddle.net/hnrfhyag/20/