Html 为什么Safari的CSS定位会在较小的屏幕宽度下中断
在我的网站www.azletconsulting.com上,当网站降至950px以下时,safari打破了注册投票、加入活动等菜单定位。在较大的尺寸下,所有内容都正确对齐,但当它下降到一个较小的css介质查询时,菜单按钮就会中断对齐。所有媒体查询的代码都是相同的,我在Chrome/Firefox中没有问题Html 为什么Safari的CSS定位会在较小的屏幕宽度下中断,html,css,safari,Html,Css,Safari,在我的网站www.azletconsulting.com上,当网站降至950px以下时,safari打破了注册投票、加入活动等菜单定位。在较大的尺寸下,所有内容都正确对齐,但当它下降到一个较小的css介质查询时,菜单按钮就会中断对齐。所有媒体查询的代码都是相同的,我在Chrome/Firefox中没有问题 .main_footer_menu { left: 0; bottom: 0; top: 319px; position: absolute; widt
.main_footer_menu {
left: 0;
bottom: 0;
top: 319px;
position: absolute;
width: 100%;
height: 80px;
background-color: rgba(93, 93, 93, 1);
z-index: 10;
box-sizing: border-box;
}
ul#menu-bottom-menu {
margin: 0;
padding: 0;
height: 80px;
}
li#menu-item-28 a {
left: -200px;
position: relative;
display: inline-block;
width: 200px;
height: 80.5px;
background-image: url("images/buttons/medium/rov.png");
background-size: 200px 80.5px;
background-repeat: no-repeat;
background-position: center;
text-indent: -99999999px;
overflow: hidden;
}
li#menu-item-29 a {
top: -90px;
position: relative;
display: inline-block;
width: 200px;
height: 80.5px;
background-image: url("images/buttons/medium/join.png");
background-size: 200px 80.5px;
background-repeat: no-repeat;
background-position: center;
text-indent: -99999999px;
overflow: hidden;
}
li#menu-item-30 a {
top: -175px;
left: 200px;
position: relative;
display: inline-block;
width: 200px;
height: 80.5px;
background-image: url("images/buttons/medium/contribute.png");
background-size: 200px 80.5px;
background-repeat: no-repeat;
background-position: center;
text-indent: -99999999px;
overflow: hidden
}
试试这个:
.main_footer_menu {
left: 0;
bottom: 0;
top: 319px;
position: absolute;
width: 100%;
height: 80px;
background-color: rgba(93, 93, 93, 1);
z-index: 10;
box-sizing: border-box;
}
ul#menu-bottom-menu {
margin: 0;
padding: 0;
height: 80px;
}
li#menu-item-28, li#menu-item-29, li#menu-item-30 {
display: inline-block;
}
li#menu-item-28 a, li#menu-item-29 a, li#menu-item-30 a {
display: inline-block;
width: 200px;
height: 80.5px;
background-size: 200px 80.5px;
background-repeat: no-repeat;
background-position: center;
text-indent: -99999999px;
overflow: hidden;
}
li#menu-item-28 a {
background-image: url("images/buttons/medium/rov.png");
}
li#menu-item-29 a {
background-image: url("images/buttons/medium/join.png");
}
li#menu-item-30 a {
background-image: url("images/buttons/medium/contribute.png");
}
嘿,这完全解决了问题,非常感谢!你们能解释一下我之前做的是什么吗?@Baroti这是一个简单的例子,你们不需要位置:相对于上面和左边的LiA元素,这是多余的。您需要显示:li项的内联块以将其放置在一行中。