问题描述
我正在开发This Website
哪个应该在任何设备上都可以响应地工作。.该站点在任何PC，具有不同屏幕尺寸的笔记本电脑上以及在iOS设备中的任何Android手机上都可以正常工作。.我在iPhone 11 pro上对其进行了测试工作正常，但菜单看起来像屎，每个li和hr之间都有奇怪的底边，这在其他任何平台设备甚至Chrome开发工具中都没有出现..还用iPhone 5对其进行了测试，大部分站点在任何设备上均无法正确显示
我认为这是因为Iam使用大众单位，所以我将其更改为px，而且是一样的
我进行了搜索，并得到了类似应该具有视口标签的答案，并且我已经有了它，并发现vw可能在iOS设备上引起问题，因此将大多数菜单vw单位更改为px，并且无法正常工作，没有任何帮助？
这是菜单的HTML代码
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
<ul id="c000">
<li class="menuTitle">Categories</li>
<ul class="closeUl">
<li><a class="closeBtn"><img src="images/menuBack.svg"></a></li>
</ul>
</ul>
<hr style="width: 100%; margin: 0; opacity: 0.5;">
<ul class="searchSection">
<li><input type="search" name="" placeholder="Show me reviews about..." class="searchInputOv"></li>
<li class="searchOV"><a class="search" href="#"><img class="searchImg" src="images/search.svg" class="search icon"></a></li>
</ul>
<ul class="navContent">
<li code="cl11"><a href="#">Health </a><img class="drobImg" src="images/arrowDown.svg"/></li><hr>
<ul class="drobNN">
<li><a href="#">Link1</a></li><hr>
<li><a href="#">Link2</a></li><hr>
<li><a href="#">Link3</a></li><hr>
</ul>
<li code="cl12"><a href="#">Weight Loss</a><img class="drobImg" src="images/arrowDown.svg"/></li><hr>
<ul class="drobNN">
<li><a href="#">Link1</a></li><hr>
<li><a href="#">Link2</a></li><hr>
<li><a href="#">Link3</a></li><hr>
</ul>
<li code="cl13"><a href="#">Fitness</a><img class="drobImg" src="images/arrowDown.svg"/></li><hr>
<ul class="drobNN">
<li><a href="#">Link1</a></li><hr>
<li><a href="#">Link2</a></li><hr>
<li><a href="#">Link3</a></li><hr>
</ul>
<li code="cl14"><a href="#">Sleep</a><img class="drobImg" src="images/arrowDown.svg"/></li><hr>
<ul class="drobNN">
<li><a href="#">Link1</a></li><hr>
<li><a href="#">Link2</a></li><hr>
<li><a href="#">Link3</a></li><hr>
</ul>
<li code="cl15"><a href="#">Reviews</a><img class="drobImg" src="images/arrowDown.svg"/></li><hr>
<ul class="drobNN">
<li><a href="#">Link1</a></li><hr>
<li><a href="#">Link2</a></li><hr>
<li><a href="#">Link3</a></li><hr>
</ul>
<li code="cl16"><a href="#">1</a><img class="drobImg" src="images/arrowDown.svg"/></li><hr>
<ul class="drobNN">
<li><a href="#">Link1</a></li><hr>
<li><a href="#">Link2</a></li><hr>
<li><a href="#">Link3</a></li>
</ul>
</ul>
</div>
这就是CSS代码
.overlay {
height: 100%;
width: 0;
position: fixed; /* Stay in place */
display: none;
flex-direction: column;
z-index: 9999999999999999999; /* Sit on top */
left: 0;
top: 0;
background-color: brown; /* Black fallback color */
overflow-x: hidden; /* Disable horizontal scroll */
}
.overlay-content {
position: relative;
}
ul.navbarButtons .hide{
display: none;
}
ul#c000{
width: 100%;
float: right;
/* margin-right: -10vw; */
/* margin-top: 9vw; */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style-type: none;
/* float: right; */
/* margin-right: -10vw; */
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
/* margin-top: 2vw; */
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
list-style-type: none;
padding: 2% 5%;
}
ul#c000 ul .closeTxt{
line-height: 5.7vw;
/* margin-top: 1vw; */
color: white;
float: right;
font-family: oswald;
font-size: 5vw;
cursor: pointer;
}
.menuTitle{
color: white;
text-transform: uppercase;
font-family: Oswald;
font-size: 8vw;
}
.closeUl{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style-type: none;
margin-right: 10px;
margin-top: 1.8%;
vertical-align: bottom;
}
.closeBtn img{
cursor: pointer;
width: 9vw;
}
ul#c000 li{
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}
/* The navigation links inside the overlay */
.navContent{
list-style-type: none;
margin-top: 20px;
}
.navContent a {
text-decoration: none;
font-size: 7vw;
color: #818181;
display: block;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
color: white;
font-family: Oswald;
padding: 2% 9%;
line-height: 12vw;
width: 65%;
}
.navContent img{
padding-right: 5vw;
width: 13vw;
}
ul.searchSection{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style-type: none;
padding:0 9vw;
margin-top: 22px;
}
ul.searchSection li:first-of-type{
max-width: 100%;
}
.searchOV{
margin-left: -16.2vw;
}
.searchInputOv{
width: 101.5%;
font-size: 5.5vw;
padding: 3vw 3vw;
font-family: Roboto;
padding-right: 14vw;
}
ul.searchSection .searchImg{
width: 10vw;
margin-top: 2vw;
}
*{
-webkit-tap-highlight-color: transparent;
}
.navContent hr{
margin: 0 auto;
width: 90%;
border: none;
height: 1px;
background-color: white;
opacity: 0.3;
}
ul.drobNN{
height: 0;
display: none;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
ul.drobNN hr{
margin: 0;
width: 100%;
border: none;
height: 1.5px;
background-color: white;
opacity: 0.65;
}
.navContent li{
max-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
/* When you mouse over the navigation links,change their color */
.overlay a:hover,.overlay a:focus {
color: #f1f1f1;
}
ul#C000 li{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
/* Position the close button (top right corner) */
.overlay .closebtn {
position: absolute;
top: -11px;
right: 10px;
font-size: 60px;
}
.drobNN li{
margin:0;
}
.drobNN a{
width: 100%;
background-color: #ffffffcc;
font-family: Roboto;
font-weight: 100;
color: brown;
padding: .45em 9vw;
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...